香港cn2直连|美国cera
vps主机域名优惠活动分享!

前端教程 动态渐变彩色文字CSS样式代码

今天给大家分享一个网页css样式实现字体从左到右背景渐变,让大家在自己的前端模板中能更灵活的二次修改开发,自己的网站变的个性化。

HTML代码分享

<div class="wrap">    闲看儿童捉柳花</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;
}

几行原生的css代码就可以实现,不需要用到js脚本等。

可以运用到网站的文字LOGO,网站通知等样式。

雪花测评 - 海量前端代码案例分享!如果上面的代码对您带来帮助请收藏本站www.idc1680.com

赞(0)
版权声明:本文采用知识共享 署名4.0国际许可协议 [BY-NC-SA] 进行授权
文章名称:《前端教程 动态渐变彩色文字CSS样式代码》
文章链接:https://www.idc1680.com/603.html
本站资源仅供个人学习交流,请于下载后24小时内删除,不允许用于商业用途,否则法律问题自行承担。

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址