分类
快捷导航

 

开启左侧

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

[复制链接] [查看百度是否已收录此帖]
梦之瑶-飞哥实名认证 发表于 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 跑马灯(流光)字体特效代码示例


帖子地址: 

涢水天城论坛-www.6665q.com 一起来分享你的资源吧!
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

会员达人更多+
广告位

热门推荐

更多+

最新信息

更多+
上个主题 下个主题 快速回复 客服中心 搜索 官方QQ群
Copyright  © 2015-2016  灵歆论坛  Powered   by  Discuz!  技术支持:灵歆网络科技    |网站地图

免责声明:


      本站资源来自及互联网收集,仅供用于学习和交流,不得用于商业用途,

请遵循相关法律法规,本站一切资源不代表本站立场,

全体用户必须在下载后的24个小时之内,从您的电脑中彻底删除上述内容.

如有侵权争议、后门、不妥请联系本站删除联系邮箱:al30@qq.com处理!

注意:本站发布所有游戏信息,均来自互联网收集,与本站无关。请玩家仔细辨认游戏信息的真实性,避免上当受骗!