纯CSS实现文字渐变过度滚动效果

2018/12/20 9:9:11 | 阅138 来源:好空间网络 [打印] [关闭]
 

先看看效果


20171106095452578.gif


HTML代码部分:

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Title</title>
 
</head>
<body>
 
<div>
    <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>


经营许可证ICP:皖B2-20100052 公司邮箱:zcdnsz@jspkongjian.net
Copyright © 2004-2015, 安徽好空间网络科技有限公司 版权所有 , 本站素材部分来源于网络,如有侵权请告知删除。