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

作者code

Warning: Undefined property: stdClass::$maxbutton id="5" in /www/wwwroot/code.5g-o.com/wp-content/plugins/kama-clic-counter/class.KCCounter.php on line 733

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
下载数:271人次, 文件大小: 86 B, 上传日期: 2021年-9月-06日

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

qrcode_for_gh_6ea2c28a1709_258 (1)

3,780 人查阅

一键获取本网站前端代码设计的所有源码

获取资源构建和完善自己的源码库
源码可以在本地直接演示
同时研究和体验 如何将一些具体的想法的实现过程
源码可以直接嫁接到自己的网站里复用
稍作修改成为自己的作品下载 (4)

您需要先支付 6元 才能查看此处内容！立即支付

类似文章