<pre>
<!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>
</pre>
ps:
1 -webkit-mask-position with this proposal do not rem to calculate the percentage is calculated as a percentage is not in accordance with the width of the image to calculate the
2 -webkit-mask-size percentages are calculated in accordance with the size set outside the container unlimited (not set to default size)
3 ramp attributes can not do animation
4 can achieve lighting Referring again this http://newmiracle.cn/?p=1833
5 non-transparent mask pictures transparent local display does not show