前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >动态渐变彩色文字代码

动态渐变彩色文字代码

作者头像
AlexTao
修改2023-05-16 13:31:45
1.5K0
修改2023-05-16 13:31:45
举报
文章被收录于专栏:钻芒博客

演示效果

钻芒博客-- 正在加载今日诗词....

html代码

代码语言:javascript
复制
<div class="wrap">    闲看儿童捉柳花</div>

CSS

代码语言:javascript
复制
@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;
}
代码语言:txt
复制
     /\*通用多彩标签  600\*200 创建于 2019-08-22\*/         var cpro\_id = "u4518729"; 

原文链接:http://www.aeink.com/230.html

本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
原始发表:2019-08-21,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • 演示效果
  • html代码
  • CSS
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档