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

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

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

demo download

HTML CODE

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

<div class="demo"></div><!-- end demo -->

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); }
}

demo download

如需转载，烦请注明出处：http://www.w3cplus.com/demo/681.html