太棒了！mask 轻松构建炫酷CSS探照特效！ --HTML5中文学习网

今天为大家带来 mask 的新 demo，打造过程比前作复杂一些，本作代号是：Think different，希望大家能喜欢小弟做的 demo，多提建议帮助我改进。（请在 Chrome 下浏览）

Think different 主要通过同时操作四个图片遮罩层 mask，配合三重预设的 animation ，其中 mask-size 和 animation-fill-mode 属性举足轻重。

前面所有动画运动完成后，对比度 contrast 动画再不断进行反复，作为本栗彩蛋… 好啦，话不多说，以下是 demo 效果和 code：

HTML CODE

demo结构较简单，也没有使用伪类

<div class="demo"></div>

CSS CODE

这里所用到的CSS3知识点并不复杂，只是要对他的概念了解清楚

body{ background-color:#f5f5f5; }

.demo{
-webkit-animation:
mask-preheat 1s,
mask-motion 5s 1s ease-out,
demo-motion 2.5s 6s linear infinite;
-webkit-animation-fill-mode:
none,
forwards,
none;
background:url(../images/main.jpg) 0 0 no-repeat;
color:#fff;
height:500px;
margin:1em auto;
-webkit-mask:center no-repeat;
-webkit-mask-image:
url(../images/apple.png),
url(../images/apple.png),
url(../images/apple.png),
url(../images/apple.png);
-webkit-mask-size:10%;
width:650px;
}

@-webkit-keyframes mask-preheat{ 50%{ -webkit-mask-size:20%,20%,20%,20%; } }
@-webkit-keyframes mask-motion{
5%{
-webkit-mask-position:left top,center,center,center;
-webkit-mask-size:20%,10%,10%,10%;
}
10%{
-webkit-mask-position:left top,right top,center,center;
-webkit-mask-size:20%,20%,10%,10%;
}
15%{
-webkit-mask-position:left top,right top,left bottom,center;
-webkit-mask-size:20%,20%,20%,10%;
}
20%{
-webkit-mask-position:left top,right top,left bottom,right bottom;
-webkit-mask-size:20%,20%,20%,20%;
}
60%{
-webkit-mask-position:left bottom,left top,right bottom,right top;
-webkit-mask-size:20%,20%,20%,20%;
}
80%{
-webkit-mask-position:center;
-webkit-mask-size:10%,10%,10%,10%;
}
90%{
-webkit-mask-position:center;
-webkit-mask-size:20%,20%,20%,20%;
}
100%{
-webkit-mask-position:top,right,bottom,left;
-webkit-mask-size:40%,40%,40%,40%;
}
}

@-webkit-keyframes demo-motion{
50%{ -webkit-filter:contrast(1.5); }
}