动态渐变彩色文字代码

发布时间:2020年04月03日 阅读:73 次

动态渐变彩色文字代码

动态渐变彩色文字代码

演示图:

56156156.gif

代码如下:

实现代码:css

<style>

@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;

    }

</style>

HTML:


<div class="wrap">    闲看儿童捉柳花</div>


Tag:
相关文章