米粒小屋

网站文字颜色渐变彩色字体动态css代码

网站文字颜色渐变彩色字体动态css代码  html 第1张

这个做出来还是挺好看的,适合有动手能力的朋友,就是前端html+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;
}



联系客服
网站客服 业务合作 Q交流群
903143761
返回顶部