太棒了!mask 轻松构建炫酷CSS探照特效!
2013-03-12 00:00
337 查看
今天 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
-
相关文章推荐
- 太棒了!mask 轻松构建炫酷CSS探照特效!
- 纯CSS炫酷3D旋转立方体进度条特效
- 纯CSS炫酷3D旋转立方体进度条特效
- 基于HTML5和CSS的焦点图全屏切换的炫酷特效
- 9月27日云栖精选夜读:阿里云首推免费人脸识别SDK 让每个APP轻松拥有短视频AR特效
- css实现下拉列表练习,原来javascipt的onmouseover和onmouseout可以用css轻松实现
- 推荐几款炫酷的基于jquery的页面特效
- 轻松学习JavaScript四:JS点击灯泡来点亮或熄灭这盏灯的网页特效映射出JS在HTML中作用
- jQuery和CSS3炫酷滚动页面内容元素动画特效
- 只需九步 助你轻松构建iPhone App
- css圆圈闪烁特效
- jQuery 和 CSS 的文本特效插件集锦
- HTML5 SVG和CSS3炫酷液态菜单按钮特效
- 使用Popfly GameCreator轻松构建Silverlight游戏--Part1
- (摘)用VB.NET轻松制作特效窗体
- 程序员210行纯css代码制作日出动画特效
- sql server如何轻松简单的构建备份表
- 轻松构建分布式Hadoop