• 好气啊~原来使用的CDN服务商莫名其妙的给我服务取消了~
  • 遇见一个沙雕汽车人.
  • 换了证书看看测试一下效果~
  • 煞笔!啥时候开工资?
  • 哪位小垃圾CC我呢?一位来自湖南的小垃圾!反正我流量无限的这样也没意义啊?
  • 测试一哈
  • 丫的Google抓取不到..换CF吧..
  • 告诉大家一个小秘密.域名后面加上 /siwa 发现不一样的世界…
  • 缓存测试2
  • 看看缓存好使不…

[CSS]简单操作实现动态渐变彩色文字

杂谈 KIENG 11个月前 (08-19) 101335次浏览 已收录 0个吐槽 扫描二维码

[CSS]简单操作实现动态渐变彩色文字

HTML 部分

<div class="wrap">KIENG 博客真的是很太牛逼了</div>

CSS 部分

@keyframes move {
      0% {background-position: 0 0;}
      100% {
        /*宽度固定,如果为百分比背景不会滚动*/
        background-position: -300px 0;
      }
}    
.wrap {
/*设置背景渐变色*/
  background-image: linear-gradient(to right, red, orange, yellow, green, yellow, orange, red, orange, yellow, green, yellow, orange, red);      
  /*chrome 私有样式,加前缀,显示背景图片*/
  -webkit-background-clip: text;      
  animation: move 5s infinite;      
  /*颜色设为透明*/
  color: transparent;      
  /*宽度固定*/
  width: 300px;
}

不支持 IE 哦 :cool:
效果演示


KIENG , 版权所有丨如未注明 , 均为原创丨本网站采用BY-NC-SA 4.0协议进行授权
转载请注明出处:[CSS]简单操作实现动态渐变彩色文字
本文章链接:https://blog.kieng.cn/1347.html
喜欢 (7)
KIENG
关于作者:
一个热衷网络的Man
发表我的评论
取消评论
表情 加粗 删除线 居中 斜体 签到

Hi,您需要填写昵称和邮箱!

  • 快速获取昵称
  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址