css字体动态渐变

@media all and (-webkit-min-device-pixel-ratio:0) and (min-resolution: .001dpcm) {
            .zhezhaoceng {
                background-image: -webkit-linear-gradient(left, #45c1d8, #000000 25%, #45c1d8 50%, #000000 75%, #45c1d8);
                -webkit-text-fill-color: transparent;
                font-size: 20px;
                -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/wangjunren1/article/details/84256479