美文网首页
CSS实现动态文字渐变色

CSS实现动态文字渐变色

作者: oh_flying | 来源:发表于2018-09-11 14:14 被阅读36次

    实现比较简单,直接上代码就可以了

    <template>
    <div class="masked">
        <h4>我就是测试的啊</h4>
    </div>
    
     </template>
      <style>
       .masked h4 {
        text-align: center;
        background-image: -webkit-linear-gradient(left, #2d8cf0, #fff 25%, #2d8cf0 50%, #fff 75%, #2d8cf0);
        -webkit-text-fill-color: transparent;
        -webkit-background-clip: text;
        -webkit-background-size: 200% 100%;
        -webkit-animation: masked-animation 2s infinite linear;
    }
    
    @-webkit-keyframes masked-animation {
        0% {
            background-position: 0 0;
        }
    
        100% {
            background-position: -100% 0;
        }
    }
    </style>
    

    代码就是上面这样咯,自己可以写个dmeo测试

    相关文章

      网友评论

          本文标题:CSS实现动态文字渐变色

          本文链接:https://www.haomeiwen.com/subject/xjkugftx.html