动态文字彩色背景滚动效果

效果图
动态文字彩色背景滚动效果
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;
 }

HTML

<div class="wrap">

动态文字彩色背景滚动效果

</div>


标签:分享
版权属于:admin 所有,转载请注明文章来源。

本文链接: https://www.taozi1.com/16731.html

赞 (0)
您的大名:
万水千山总是情,给个打赏行不行。 打赏

评论区

发表评论

47+32=?

暂无评论,要不来一发?

回到顶部