css3 mask遮罩动画(照明灯效果)详解编程语言

 !DOCTYPE html 
 html lang="en" 
 head 
 meta charset="UTF-8" 
 title Document /title 
 style 
.wrap{
 position:absolute;
 width: 400px;
 border:1px solid black;
}
#mask{
 height: 300px;
 background:url(http://sandbox.runjs.cn/uploads/rs/142/wat3wtnz/dongzhi.jpg) lightblue;
 -webkit-mask: url(http://sandbox.runjs.cn/uploads/rs/142/wat3wtnz/mask.png) no-repeat;
 -webkit-mask-size:30px 20px;
 /*animation: 2s maskPosition infinite alternate ;*/
}
 

 @keyframes maskPosition{
 0%{-webkit-mask-position:0 0;}
 100%{-webkit-mask-position:1rem 1rem;}
} 
 /style 
 /head 
 body 
 div 
 div id="mask" /div 
 /div 
 script 
 

 /script 
 /body 
 /html 
 

ps:

1 -webkit-mask-position 这个建议用rem来计算 不要用百分比计算 百分比不是按照图片的宽度来计算的

2 -webkit-mask-size 百分比是按照外面容器计算的 大小设置无限制的 (不设置为默认大小)

3 渐变属性不能做动画

4 实现照明灯 可以再参考http://newmiracle.cn/?p=1833这个

5 蒙版图片非透明地方显示 透明不显示

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