webkit内核浏览器-webkit-animation实现蒙版遮罩和动画效果

《webkit内核浏览器-webkit-animation实现蒙版遮罩和动画效果》由会员上传分享，免费在线阅读，更多相关内容在行业资料-天天文库。

1、-webkit-transform定义了元素的变形，-webkit-transition定义了元素的属性变化样式，-webkit-animation与-webkit-keyframes则真正的让元素动起来（不只是变到什么状态，更定义了中间过程）让元素动起来-webkit-animation定义一段动画属性，比如名字，持续时间，当前状态等。-webkit-keyframes则对每一个动画定义时间轴，可以设置某个时间动画作用的元素是什么状态。--@-webkit-keyframesrotateA{0%{-webkit-

2、transform:rotateY(0deg);}100%{-webkit-transform:rotateY(360deg);}} #circle{-webkit-animation-name:rotateA;-webkit-animation-duration:3s;-webkit-animation-iteration-count:infinite;-webkit-animation-timing-function:linear;}--上面的代码中，定义了元素#circle的动画属性：名字是rotateA等。

3、@-webkit-keyframesrotateA针对name是rotateA的动画设置时间轴：0%位置时什么样，100%位置时什么样。css3animation的所有属性及详细解释在http://www.w3.org/TR/css3-animations/@-webkit-keyframestest{0%{left:50px;top:100px;}100%{left:200px;top:100px;}}webkit内核浏览器实现蒙版遮罩和动画效果熟悉photoshop的同学都知道，它里面有蒙版遮罩层的效果，在we

4、bkit内核的浏览器中同样可以实现。在本文中我将使用以下几个标签，来实现图层蒙版和动画效果。-webkit-mask-webkit-mask属性非常强大，它让为一个元素添加蒙板成为可能，这和ps里面的蒙板功能是一样的。如下例所示：背景图片：蒙版层：css样式：.img{-webkit-mask:url("002.png");}html代码：最终效果如下：蒙版除了用半透明的png图片，还可以用它自身的样式来实现，如下例所示，当它的alpha值为0的时候会覆盖下面的元素，为1的时

5、候会完全显示下面的内容。css样式：.img{-webkit-mask:-webkit-gradient(linear,0%0%,0%100%,from(rgba(0,0,0,1)),to(rgba(0,0,0,0)));}最终效果：渐变的写法具体参考css3实现背景颜色线性渐变。-webkit-mask-position:移动的蒙版-webkit-mask还有另外一个重要属性，它可以设置蒙版的位置，下面我们通过一个例子来讲述一下：css样式：.img{-webkit-mask:url("002.png");-we

6、bkit-mask-position:00;}.img:hover{-webkit-mask-position:-83px-83px;}html样式不变，最终效果如下(左边为正常状态，右边为鼠标移动上去的状态)：这里，我们还可以用-webkit-animation来制作自动移动的蒙版，复制下面的代码，自行进行测试：

7、ext/html;charset=utf-8"/>@-webkit-keyframeswipe{0%{-webkit-mask-position:00;}100%{-webkit-mask-position:-170px0;}}.img{-webkit-mask:url(http://www.rainleaves.com/wp-content/uploads/2011/12/002.png);-webkit-animation:wi

8、pe6sinfinite;-webkit-animation-delay:0;-webkit-animation-direction:alternate;}.img:hover{}