CSS3实现文字流光渐变特效

最新推荐文章于 2024-01-12 10:30:50 发布

做一个有知识的流氓

最新推荐文章于 2024-01-12 10:30:50 发布

阅读量1.2w

点赞数 14

分类专栏： HTML+CSS3 文章标签： CSS3 html 前端

本文链接：https://blog.csdn.net/qq_36370731/article/details/78454700

版权

HTML+CSS3 专栏收录该内容

17 篇文章 0 订阅

订阅专栏

先上个效果图

下面先上代码

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属性给文字加一个线性渐变的背景色