css3mask淡出文字详解编程语言

css3mask淡出文字

.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 
 /div 

原创文章，作者：ItWorker，如若转载，请注明出处：https://blog.ytso.com/18899.html