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

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

效果

linear-gradient实现纯CSS文字淡入效果相关推荐

css如何使文字抖动,纯CSS文字彩色抖动抖音效果
效果纯CSS文字彩色抖动抖音效果简介直接将这下面段放进你的 style.css doudong{ animation: uk-text-shadow-glitch .65s cubic-bezi ...
纯CSS实现弹幕效果
纯CSS实现弹幕效果动画相关的属性和方法已经本部分的开头简单提过了,我们来看一下本次要实现的效果--弹幕- 当你在阅读.看视频的时候经常会遇见一段文件或者一张表情从页面划过,要实现一个完整的功能很复 ...
纯 CSS 实现波浪效果！
一直以来,使用纯 CSS 实现波浪效果都是十分困难的. 因为实现波浪的曲线需要借助贝塞尔曲线. 而使用纯 CSS 的方式,实现贝塞尔曲线,额,暂时是没有很好的方法. 当然,借助其他力量(SVG.CAN ...
css中间镂空,怎么用纯CSS实现镂空效果
怎么用纯CSS实现镂空效果发布时间:2021-03-19 09:49:16 来源:亿速云阅读:99 作者:小新小编给大家分享一下怎么用纯CSS实现镂空效果,希望大家阅读完这篇文章之后都有所收获, ...
css3波浪纹路_纯 CSS 实现波浪效果！
一直以来,使用纯 CSS 实现波浪效果都是十分困难的. 因为实现波浪的曲线需要借助贝塞尔曲线. 而使用纯 CSS 的方式,实现贝塞尔曲线,额,暂时是没有很好的方法. 当然,借助其他力量(SVG.CAN ...
制作css开关,纯css实现开关效果
大家好,我又来了,这次给大家表演使用纯css实现开关效果首先是构思我们使用标签来实现这个效果. checkbox的选中.未选中的特性,刚好对应开关的打开.关闭 on:打开 off:关闭未选中,则 ...
html实现开关,使用纯css实现开关效果
首先是构思我们使用标签来实现这个效果. checkbox的选中.未选中的特性,刚好对应开关的打开.关闭 on:打开 off:关闭未选中,则关闭开关选中,则打开开关开始画出off.on状态的草图 ...
如何用纯 CSS 实现优惠券效果
背景本文来自CODE.FUN ,讲述如何用纯 CSS 实现优惠券效果的实践案例,分享给大家. 优惠券视觉效果上面是优惠券的视觉效果,本文分享如何使用纯 CSS 实现它的主要框架,希望对大家有 ...
unity Text文字淡入效果
unity Text文字淡入效果 CrossFadeAlpha()方法先将alpha降为0,再改为1. public Text t;void Start() {t.CrossFadeAlpha(0f ...

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

css代码 linear-gradient属性

html代码

文字淡入关键操作

效果

linear-gradient实现纯CSS文字淡入效果相关推荐

最新文章

热门文章