事件代码 ·

网站彩色动态渐变文字小事件代码

彩色动态渐变文字

先言:

  • 你是不是看见过有些网站的文字是动态渐变色变化的.
  • 小编这次带来的是6中渐变色效果文字.

使用教程:

  • 将css代码放入以.css结束的文件
  • 然后在在以.html或.php结束的文件里面在<body></body>之间输入.html的代码.

代码文件:

.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;
}

产品展示:

网站彩色动态渐变文字小事件代码 事件代码 第1张

演示站点:

温馨提示:

本站资源全部来源于网络!若有侵权请发送相关内容至ymg@yunmge.com邮箱反馈,欢迎大家发邮箱留言想要的作品,我们会在往后的日子里进行更新!

相关下载

点击下载