css3mask淡出文字
<pre>
.p0_11wrap {
width: 0.299rem;
height: 7.68rem;
overflow: hidden;
background: url(/weiyeweiwangzhan/images/0/p0_11.png) no-repeat;
background-size: 100%;
background-position: 0rem 3.8rem;
-webkit-mask: url(/weiyeweiwangzhan/images/0/p0_11zhezhao.png) no-repeat;
-webkit-mask-size: 0.299rem 7.68rem;
-webkit-mask-position: 0 0;
position: absolute;
left: 76.933%;
top: 21.891%;
}
.p0_11warpzhezhao {
width: 0.299rem;
height: 7.68rem;
background: url(/weiyeweiwangzhan/images/0/p0_11zhezhao.png);
background-size: 0.299rem 7.68rem;
background-position: 0rem 0rem;
position: absolute;
left: 76.933%;
top: 21.891%;
}
.wenzianim1 {
animation: wenzianim1 4s linear 1s forwards;
-webkit-animation: wenzianim1 4s linear 1s forwards;
}
@keyframes wenzianim1 {
0% {
-webkit-mask-position: 0rem -8.080rem;
}
100% {
-webkit-mask-position: 0rem 0rem;
}
}
@-webkit-keyframes wenzianim1 {
0% {
-webkit-mask-position: 0rem -8.080rem;
}
100% {
-webkit-mask-position: 0rem 0rem;
}
}
<div class="p0_11wrap wenzianim2">
</div>
</pre>
来源：https://www.cnblogs.com/newmiracle/p/11852944.html