太棒了!mask 轻松构建炫酷CSS探照特效!
今天 为大家带来 mask 的新 demo,打造过程比前作复杂一些,本作代号是:Think different,希望大家能喜欢小弟做的 demo,多提建议帮助我改进。(请在 Chrome 下浏览)
Think different 主要通过同时操作四个图片遮罩层 mask,配合三重预设的 animation ,其中 mask-size 和 animation-fill-mode 属性举足轻重。
前面所有动画运动完成后,对比度 contrast 动画再不断进行反复,作为本栗彩蛋… 好啦,话不多说,以下是 demo 效果和 code:
HTML CODE
demo结构较简单,也没有使用伪类
CSS CODE
这里所用到的CSS3知识点并不复杂,只是要对他的概念了解清楚
DEMO:http://www.w3cplus.com/demo/css3/ThinkDifferent/
下载:ThinkDifferent.zip
Think different 主要通过同时操作四个图片遮罩层 mask,配合三重预设的 animation ,其中 mask-size 和 animation-fill-mode 属性举足轻重。
前面所有动画运动完成后,对比度 contrast 动画再不断进行反复,作为本栗彩蛋… 好啦,话不多说,以下是 demo 效果和 code:
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:http://www.w3cplus.com/demo/css3/ThinkDifferent/
下载:ThinkDifferent.zip
【太棒了!mask 轻松构建炫酷CSS探照特效!】相关文章
4. jQuery/CSS3 3D焦点图动画 多种炫酷图片切换特效
6. Mozilla又选领导了!任命Chris Beard为临时CEO
本文来源:https://www.51html5.com/a919.html
上一篇:纯css3有序列表
下一篇:CSS3 Admin Menu
﹝太棒了!mask 轻松构建炫酷CSS探照特效!﹞相关内容
- 10 个轻松学会 CSS3 的优秀在线资源
- CSS3的animation轻松实现漂浮的云
- Re-Infiltration at Dusk
- skygear-01驱逐舰
- Skygear-01 Destroyer
- EXOdesk:10点触控,可定义的HTML5 apps
- SkyDrive重大更新:AJAX支持、HTML 5上传等
- 微软谈SkyDrive新分享功能
- 微软正寻找Skype for Windows 8 app工程师
- 微软计划推基于HTML5的网页浏览器版Skype应用