linear-gradient实现纯CSS文字淡入效果

利用CSS中的linear-gradient属性和帧动画，实现文字的淡入效果。

css代码 linear-gradient属性

@-webkit-keyframes shinetext {
    0% {
        background: -webkit-linear-gradient(top, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 100%);
        color: transparent;
        -webkit-background-clip: text;
    }
    7% {
        background: -webkit-linear-gradient(top, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 1) 5%, rgba(0, 0, 0, 0) 10%, rgba(0, 0, 0, 0) 100%);
        color: transparent;
        -webkit-background-clip: text;
    }
    14% {
        background: -webkit-linear-gradient(top, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 1) 10%, rgba(0, 0, 0, 0) 20%, rgba(0, 0, 0, 0) 100%);
        color: transparent;
        -webkit-background-clip: text;
    }
    21% {
        background: -webkit-linear-gradient(top, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 1) 15%, rgba(0, 0, 0, 0) 30%, rgba(0, 0, 0, 0) 100%);
        color: transparent;
        -webkit-background-clip: text;
    }
    28% {
        background: -webkit-linear-gradient(top, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 1) 20%, rgba(0, 0, 0, 0) 40%, rgba(0, 0, 0, 0) 100%);
        color: transparent;
        -webkit-background-clip: text;
    }
    35% {
        background: -webkit-linear-gradient(top, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 1) 25%, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 0) 100%);
        color: transparent;
        -webkit-background-clip: text;
    }
    42% {
        background: -webkit-linear-gradient(top, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 1) 30%, rgba(0, 0, 0, 0) 60%, rgba(0, 0, 0, 0) 100%);
        color: transparent;
        -webkit-background-clip: text;
    }
    49% {
        background: -webkit-linear-gradient(top, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 1) 35%, rgba(0, 0, 0, 0) 70%, rgba(0, 0, 0, 0) 100%);
        color: transparent;
        -webkit-background-clip: text;
    }
    56% {
        background: -webkit-linear-gradient(top, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 1) 40%, rgba(0, 0, 0, 0) 80%, rgba(0, 0, 0, 0) 100%);
        color: transparent;
        -webkit-background-clip: text;
    }
    63% {
        background: -webkit-linear-gradient(top, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 1) 45%, rgba(0, 0, 0, 0) 90%, rgba(0, 0, 0, 0) 100%);
        color: transparent;
        -webkit-background-clip: text;
    }
    70% {
        background: -webkit-linear-gradient(top, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 1) 50%, rgba(0, 0, 0, 0) 100%, rgba(0, 0, 0, 0) 100%);
        color: transparent;
        -webkit-background-clip: text;
    }
    77% {
        background: -webkit-linear-gradient(top, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 1) 62.5%, rgba(0, 0, 0, 0) 100%, rgba(0, 0, 0, 0) 100%);
        color: transparent;
        -webkit-background-clip: text;
    }
    84% {
        background: -webkit-linear-gradient(top, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 1) 75%, rgba(0, 0, 0, 0) 100%, rgba(0, 0, 0, 0) 100%);
        color: transparent;
        -webkit-background-clip: text;
    }
    91% {
        background: -webkit-linear-gradient(top, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 1) 87.5%, rgba(0, 0, 0, 0) 100%, rgba(0, 0, 0, 0) 100%);
        color: transparent;
        -webkit-background-clip: text;
    }
    100% {
        background: -webkit-linear-gradient(top, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 1) 100%, rgba(0, 0, 0, 0) 100%, rgba(0, 0, 0, 0) 100%);
        color: transparent;
        -webkit-background-clip: text;
    }
}

.text {
    -webkit-background-clip: text;
    display: none;
}

.text.active {
    -webkit-animation: shinetext 2s 0s ease-in-out;
    -webkit-animation-fill-mode: forwards;
}

html代码

<div class="box">
        <div class="text">
            《雁邱词》 元好问
            <br> 问世间情是何物，直教生死相许。
            <br> 天南地北双飞客，老翅几回寒暑。
            <br> 欢乐趣，离别苦，就中更有痴儿女。
            <br> 君应有语，渺万里层云，千山暮雪，只影向谁去。
            <br> 横汾路，寂寞当年箫鼓，荒烟依旧平楚。
            <br> 招魂楚些何嗟及，山鬼暗啼风雨。
            <br> 天也妒，未信与，莺儿燕子俱黄土。
            <br> 千秋万古，为留待骚人，狂歌痛饮，来访雁邱处。
        div>
    div>

文字淡入关键操作

将text设置可见，并添加active类名。 

效果