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

最新推荐文章于 2024-08-18 15:45:41 发布

front_end_fan

最新推荐文章于 2024-08-18 15:45:41 发布

阅读量915

点赞数

分类专栏： css 文章标签： css3 动画文字渐变色

css 专栏收录该内容

34 篇文章 0 订阅

订阅专栏

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

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