• 告诉大家一个小秘密.域名后面加上 /siwa 发现不一样的世界…
  • 缓存测试2
  • 看看缓存好使不…
  • 啥时候是个头啊
  • 这特么又是哪个臭弟弟DD我呢?2020-02-12 12:15
  • 难受啊 马飞
  • 曾经自己 像浮萍一样无依
  • 说尼玛发工资还没信呢
  • 快走了…不算今天出除去周日还有5天!\(^o^)/
  • 还有半个月就走了…挺好的.

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

杂谈 KIENG 8个月前 (08-19) 84627次浏览 已收录 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
喜欢 (0)
KIENG
关于作者:
一个热衷网络的Man
发表我的评论
取消评论
表情 加粗 删除线 居中 斜体 签到

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

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