CSS3 text-fill-color 文字遮罩动画效果实例页面

展示

代码

CSS代码：

.masked{
     background:url(../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;}
}
            

HTML代码：

<div class="masked">
    <h4>这是一段可选文字</h4>
</div>