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

来源：互联网发布：智慧农业大数据平台编辑：程序博客网时间：2024/05/18 11:25

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

- - css代码 linear-gradient属性
  - html代码
  - 文字淡入关键操作
  - 效果

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类名。

效果

文字淡入

0 0