css实现标签背景渐变色和标签内文字渐变色

 #count{
        background: linear-gradient(90deg, #496eaa, #944fa8, #2a6496, #496eaa);
        background-size:1400% 300%;
        animation:mymove 20s ease infinite;
        -webkit-animation: mymove 20s ease infinite;
        -moz-animation: mymove 20s ease infinite;
    }
//起始颜色和初始颜色相等,视觉效果好看
    @keyframes mymove
    {
         0% {
            background-position: 0% 0%; }
            50% {
            background-position: 50% 100%; }
            100% {
             background-position: 100% 0%; }
    }

对应html

<div id='count'>测试</div>

文字渐变效果

    #count{
        text-align: center;
        background-image: -webkit-linear-gradient(left, #147B96, #E6D205 25%, #147B96 50%, #E6D205 75%, #147B96);
        -webkit-text-fill-color: transparent;
        -webkit-background-clip: text;
        -webkit-background-size: 200% 100%;
        -webkit-animation: masked-animation 4s infinite linear;
      }
    @-webkit-keyframes masked-animation {
         0%{ background-position: 0 0;}
         100% { background-position: -100% 0;}
    }

猜你喜欢

转载自blog.csdn.net/weixin_35993084/article/details/80738885