CSS3教程

当前位置: HTML5技术网 > CSS3教程 > 太棒了!mask 轻松构建炫酷CSS探照特效!

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

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


       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探照特效!】相关文章

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

2. 20种炫酷CSS3按钮样式和鼠标滑过特效

3. 9种CSS3炫酷图片预览展示动画特效

4. jQuery/CSS3 3D焦点图动画 多种炫酷图片切换特效

5. 酷毙了!三种风格的全屏幻灯片效果

6. Mozilla又选领导了!任命Chris Beard为临时CEO

7. 7种炫酷HTML5 SVG液态水滴融合动画特效

8. jQuery炫酷图片3d背景视觉差特效

9. 7款纯CSS3实现的炫酷动画应用

10. HTML5中对accesskey属性的解释与规定

本文来源:https://www.51html5.com/a919.html

点击展开全部
上一篇:纯css3有序列表 下一篇:CSS3 Admin Menu

﹝太棒了!mask 轻松构建炫酷CSS探照特效!﹞相关内容

「太棒了!mask 轻松构建炫酷CSS探照特效!」相关专题

css

其它栏目

也许您还喜欢