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

来源：互联网发布：caffe rfcn 训练编辑：程序博客网时间：2024/06/05 21:13

本文转自
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>

复制代码查看效果，效果图如下：
这里写图片描述

总结：

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

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

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

阅读全文

0 0