CSS3实现文字流光渐变特效

先上个效果图

下面先上代码

HTML部分

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

</head>
<body>

<div class="masked">
    <h4>日暮苍山远,天寒白屋贫。柴门闻犬吠,风雪夜归人。</h4>
</div>

</body>
</html>
CSS部分

    <style>
        .masked h4{
            display: block;
            width: 600px;
            height: 100px;
            /*渐变背景*/
            background-image: -webkit-linear-gradient(left, #3498db, #f47920 10%, #d71345 20%, #f7acbc 30%,
            #ffd400 40%, #3498db 50%, #f47920 60%, #d71345 70%, #f7acbc 80%, #ffd400 90%, #3498db);
            color: transparent; /*文字填充色为透明*/
            -webkit-text-fill-color: transparent;
            -webkit-background-clip: text;          /*背景剪裁为文字,只将文字显示为背景*/
            background-size: 200% 100%;            /*背景图片向水平方向扩大一倍,这样background-position才有移动与变化的空间*/
            /* 动画 */
            animation: masked-animation 4s infinite linear;
        }
        @keyframes masked-animation {
            0% {
                background-position: 0 0;   /*background-position 属性设置背景图像的起始位置。*/
            }
            100% {
                background-position: -100% 0;
            }
        }
    </style>


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

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

2、transparent 将文字设置为透明

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

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

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

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

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


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


最后需要说一下,这个效果是我在浏览论坛的时候学会的,下面贴上网址:http://www.qdfuns.com/notes/39070/4c44437cbde4bb99596c7adfa2324ae0.html



评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值