CSS特殊样式（五）CSS3 text-fill-color简介及应用展示

时间：2022-06-27 08:11:43

本文转自
http://www.zhangxinxu.com/wordpress/2010/06/css3-text-fill-color%E7%AE%80%E4%BB%8B%E5%8F%8A%E5%BA%94%E7%94%A8%E5%B1%95%E7%A4%BA/ 

    <!DOCTYPE html>
    <html>
    <head lang="en">
        <meta charset="UTF-8">
        <title></title>
        <style>
            .masked{
                background:url(http://www.zhangxinxu.com/study/image/paint.png);
                -webkit-text-fill-color:transparent;
                -webkit-background-clip:text;
                -webkit-animation-name:masked-animation;
                -webkit-animation-duration:40s;
                -webkit-animation-iteration-count:infinite;
                -webkit-animation-timing-function:linear;
                color:#fff;
            }
            @-webkit-keyframes masked-animation {
                0% {background-position:left bottom;}
                100% {background-position:right bottom;}
            }
        </style>
    </head>
    <body>
        <div class="masked">
            <h1>这是一段标题文字</h1>
        </div>
    </body>
    </html>

复制代码查看效果，效果图如下：
CSS特殊样式（五）CSS3 text-fill-color简介及应用展示

总结：

适应场合：个人觉得，此效果适合用在logo、标题文字等上面，效果还是蛮不错的。

效果描述：这里面是个动画效果(animation)，颜色一直（infinite）均匀（linear）渐变。

原理：其实很简单，给文字的背景图片加上左右一直不断的偏移动画，而背景图片是个水平方向渐变的图形
标签：

相关文章