• 妈的,写之前不说,写完了了你说不行.中途我还问你你说对.你真是中国第一Monkey
  • 沃妮马,过的真快!转眼又上班了.等待十月一.
  • 还有1天就是端午节了.过的真快, 在这个公司工作半年啦..
  • 咦~哪个弟弟CC我呢?
  • 简单,简单.我提个思路.
  • 不算今天还有2天就放假了.
  • 一切随缘,随波逐流.
  • 我的天啊,手欠把写了两天的项目删除了,回收站都没有!真是一干二净!心态爆炸!
  • 如果您需要随机数,请使用 random_int(). 如果需要随机字节字符串,请使用 random_bytes(). 所以不要使用 mt_rand(), rand(), 或 uniqid() .
  • 五一过去的真快

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

杂谈 KIENG 1个月前 (08-19) 14897次浏览 已收录 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,您需要填写昵称和邮箱!

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