太棒了!mask 简单构建刀光一闪效果!

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

太棒了!mask 简单构建刀光一闪效果!

今天将介绍遮罩属性 —— mask 的简单 demo。 mask 属性暂时只有 webkit 浏览器支持,使用需要加标识符。案例中用到的缩写均可展开,特别需要强调的是 mask-origin 这个属性,指定了遮罩的初始位置。默认是 padding,本例中设置为 content。

demo

HTML code

<div class="demo">原来我的真身是一把名刀</div><!-- end demo -->

CSS code

body{
	background-color:#000;
	font-size:12px;
}

.demo{
	-webkit-animation:demo-an 2.5s ease-out infinite;
	border-radius:.4em;
	color:#fff;
	font:bold 4em/normal \5FAE\8F6F\96C5\9ED1,tahoma,arial,\5b8b\4f53,sans-serif;
	margin:1em;
	-webkit-mask:-webkit-linear-gradient(left,rgba(0,0,0,0) 0%,rgba(0,0,0,1) 10%,rgba(0,0,0,0) 20%) -500px 0 no-repeat content;
	text-align:center;
	text-shadow:1px 1px 0 #ccc;
	width:12em;
}
@-webkit-keyframes demo-an{
	to{ -webkit-mask-position:500px 0; }
}

demo

转载请注明出处:http://www.w3cplus.com/node/674

nike air max 90 soccer

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

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

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