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 class="wrap">
    <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 蒙版图片非透明地方显示 透明不显示

原创文章如转载,请注明本文链接: http://newmiracle.cn/?p=2348

发表评论

电子邮件地址不会被公开。 必填项已用*标注