太棒了!mask 轻松构建炫酷CSS探照特效!

特别声明:小站对部分原创文章已开启付费阅读,并开通年费VIP通道,年费价格为 ¥365.00元。如果您喜欢小站的内容,可以点击开通会员进行全站阅读。如果您对付费阅读有任何建议或想法,欢迎发送邮件至: airenliao@gmail.com!(^_^)

太棒了!mask 轻松构建炫酷CSS探照特效!

今天 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

Wonderful UA Air Jordan 1 X "Off White Unc" White Blue Retro High

如需转载,烦请注明出处:https://www.w3cplus.com/demo/681.html

如果文章中有不对之处,烦请各位大神拍正。如果你觉得这篇文章对你有所帮助,打个赏,让我有更大的动力去创作。(^_^)。看完了?还不过瘾?点击向作者提问!

赏杯咖啡,鼓励他创作更多优质内容!
返回顶部