FORGOT YOUR DETAILS?

用html css 制作聚光灯照射文字特效闪光文字动画效果cid1175+源码下载

html and css

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>webIQ</title>

    <link rel="stylesheet" href="" />
<style>	
  * {
  padding: 0;
  margin: 0;
}

body {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  background-color: black;
}

p {
  position: relative;
  font-family: sans-serif;
  font-size: 4em;
  letter-spacing: 4px;
  overflow: hidden;
  background: linear-gradient(90deg, #000, #fff, #000);
  background-repeat: no-repeat;
  background-size: 80%;
  animation: animate 6s linear infinite;
  -webkit-background-clip: text;
  -webkit-text-fill-color: rgba(255, 255, 255, 0);
}

@keyframes animate {
  0% {
    background-position: -500%;
  }
  100% {
    background-position: 500%;
  }
}
</style>
  </head>
  <body>
    <p>Learn Web Designing with webIQ</p>
  </body>
</html>

 在线演示


让链接同时具备两种打开方式

获取源码: webIQ - Shining Text Animation
下载数:78人次, 文件大小: 86 B, 上传日期: 2021年-9月-06日

公众号回复:gcode  获取解压密码

qrcode_for_gh_6ea2c28a1709_258 (1)

1,477 人查阅

在此可以一键获取本站点的所有前端源码

获取资源构建和完善自己的源码库下载 (4)原价:¥15

现价 7元 一键获取本站点的所有前端源码!立即支付





期末学习考试考研复习卡通手绘可爱动态表情包

TOP

获取源码,用于学习交流。记得 B站/点赞 /投币/转发 非常谢谢!

一键获取本站点所有源码