实现文字渐变

<template>
    <div class="box">
        <div class="masked">
            <p>wrbwrrwrewr</p>
            <p>fdsfsfbsmfs</p>
            <p>wrernwrwr</p>
            <p>drwrwernwe,r</p>
        </div>
    </div>
</template>
<style>
    .box{
        background: red;
    }
    @media all and (-webkit-min-device-pixel-ratio:0) and (min-resolution: .001dpcm) {

        .masked{
            background-image: -webkit-linear-gradient(top, #ccc, #000);
            -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;}
    }
</style>
效果图：

 

转载于:https://www.cnblogs.com/cina33blogs/p/7519236.html