灵歆论坛

 找回密码
 立即注册
快捷导航
搜索


开启左侧

CSS3实现文字跑马灯(流光)效果

[复制链接] [查看百度是否已收录此帖]
[未点亮至尊红钻]发帖数量不足10篇 [未点亮至尊黄钻]威望不足10点 [未点亮至尊蓝钻]在线时间不足10小时 [未点亮至尊绿钻]贡献度不足10点 [未点亮至尊紫钻]金币不足100个 [未点亮至尊粉钻]精华贴数不足10贴 [未点亮至尊黑钻]活跃不足8个

 等级: 
 级别: 管理员
 UID:  1   [未点亮普号显示]钻石不足3个
 金 钱:
 声 望:
 贡 献:
 活 跃:
 发 贴: ()
 灵 石:  
性 别: I'm 火星人!
阅读权限: 255
在线时长:  小时
注册时间: 2019-8-27
最后登录: 1970-1-1
发表于 2020-11-20 13:40:32 |显示全部楼层

马上注册,享用更多功能,轻松玩转整个论坛。

您需要 登录 才可以下载或查看,没有帐号?立即注册

x
1.jpg
HTML代码
  1. <p><div></p><p>    <p></p><p>        灵歆论坛:http://www.6665q.com</p><p>    </p></p><p></div></p>
复制代码
CSS代码
  1. <style type="text/css">
  2.     body {
  3.         margin: 0;
  4.         padding: 0;
  5.         background-color: #2f2424;
  6.     }
  7.     div {
  8.         margin: 400px auto;
  9.         font-size: 40px;
  10.         text-align: center;
  11.     }
  12.     p {
  13.         margin: 0;
  14.         background: -webkit-linear-gradient(left,
  15.             #ffffff,
  16.             #ff0000 6.25%,
  17.             #ff7d00 12.5%,
  18.             #ffff00 18.75%,
  19.             #00ff00 25%,
  20.             #00ffff 31.25%,
  21.             #0000ff 37.5%,
  22.             #ff00ff 43.75%,
  23.             #ffff00 50%,
  24.             #ff0000 56.25%,
  25.             #ff7d00 62.5%,
  26.             #ffff00 68.75%,
  27.             #00ff00 75%,
  28.             #00ffff 81.25%,
  29.             #0000ff 87.5%,
  30.             #ff00ff 93.75%,
  31.             #ffff00 100%);
  32.         -webkit-background-clip: text;
  33.         -webkit-text-fill-color: transparent;
  34.         background-size: 200% 100%;
  35.         animation: masked-animation 2s infinite linear;
  36.     }
  37.     @keyframes masked-animation {
  38.         0% {
  39.             background-position: 0 0;
  40.         }
  41.         100% {
  42.             background-position: -100%, 0;
  43.         }
  44.     }
  45. </style>
复制代码
代码实现原理:
以上代码中,使用了CSS中的 animation 属性,linear-gradient()函数,以及 @keyframes 规则来实现的
1、animation 属性
animation:是CSS3中新增的属性,它可以制作出多种酷炫的动画效果,如果对flash有一定的了解,那这个属性就会很容易学习。
2、@keyframes 规则。
@keyframes:能够将一套 CSS 样式逐渐变化为另一套样式,来实现动画的效果。
0% 是动画的开始时间,100% 动画的结束时间。
3、linear-gradient() 函数
linear-gradient() 函数用于创建一个线性渐变的 "图像"。

CSS 跑马灯(流光)字体特效代码示例


<
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

上个主题 下个主题 快速回复 客服中心 搜索 官方QQ群
快速回复 返回顶部 返回列表