600字范文,内容丰富有趣,生活中的好帮手!
600字范文 > 字体 流光css 实例详解CSS3制作文字流光渐变特效

字体 流光css 实例详解CSS3制作文字流光渐变特效

时间:2018-07-27 05:38:03

相关推荐

字体 流光css 实例详解CSS3制作文字流光渐变特效

这篇文章主要介绍了CSS3制作文字流光渐变特效的制作方法,有一定的参考价值,感兴趣的小伙伴可以参考一下,希望对你有的帮助!

先上个效果图

下面先上代码

HTML部分

Title

日暮苍山远,天寒白屋贫。柴门闻犬吠,风雪夜归人。

CSS部分

其实这是一个挺简单的小例子,属性的作用在这里就不多说,因为文档都能查的到,我在这里主要说一说思路。

1、linear-gradient属性给文字加一个线性渐变的背景色

2、transparent 将文字设置为透明

这时候你会发现文字不见了,屏幕上只剩下了背景颜色,但是我们知道文字没有消失,transparent的元素仍然存在于文档中(还占着位)。

3、background-clip将背景裁剪为文字,屏幕就变成这样子了。

这里很好理解,打个比喻,你穿了隐身衣隐身了,这时候有一个人给你泼了一桶颜料,你就现形了

(我也不知道这样来形容合不合适,我隐约感觉这个会有更好的解释,希望大家能不吝赐教)

4、animation设置动画,我们这里通过背景色position的变化来达成这个效果,所以要先将background-size放大,这样子background-position才有变化的空间。

以上步骤说简单点就是:给文字加一个渐变色背景,设置文字透明,再将文字作为屏幕背景,通过控制背景色的位置变化来达到这个效果。

【相关教程推荐】

1. CSS视频教程

2. CSS在线手册

3. bootstrap教程

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。