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

-webkit-transform定义了元素的变形，-webkit-transition定义了元素的属性变化样式，-webkit-animation与-webkit-keyframes则真正的让元素动起来（不只是变到什么状态，更定义了中间过程）让元素动起来-webkit-animation定义一段动画属性，比如名字，持续时间，当前状态等。-webkit-keyframes则对每一个动画定义时间轴，可以设置某个时间动画作用的元素是什么状态。--@-webkit-keyframes rotateA {0%{ -webkit-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等。@-webkit-keyframes rotateA 针对name是rotateA的动画设置时间轴：0%位置时什么样，100%位置时什么样。css3 animation的所有属性及详细解释在/TR/css3-animations/@-webkit-keyframes test { 0% { left: 50px; top: 100px; } 100% { left: 200px; top: 100px; }}webkit内核浏览器实现蒙版遮罩和动画效果熟悉photoshop的同学都知道，它里面有蒙版遮罩层的效果，在webkit内核的浏览器中同样可以实现。在本文中我将使用以下几个标签，来实现图层蒙版和动画效果。-webkit-mask-webkit-mask属性非常强大，它让为一个元素添加蒙板成为可能，这和ps里面的蒙板功能是一样的。如下例所示：背景图片：蒙版层：css样式：.img{-webkit-mask:url(002.png);}html代码：img src=0011.jpg /最终效果如下：蒙版除了用半透明的png图片，还可以用它自身的样式来实现，如下例所示，当它的alpha值为0的时候会覆盖下面的元素，为1的时候会完全显示下面的内容。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);-webkit-mask-position:0 0;}.img:hover{-webkit-mask-position:-83px -83px;}html样式不变，最终效果如下(左边为正常状态，右边为鼠标移动上去的状态)：这里，我们还可以用-webkit-animation来制作自动移动的蒙版，复制下面的代码，自行进行测试：!DOCTYPE htmlhtml xmlns=/1999/xhtmlheadmeta http-equiv=Content-Type content=text/html; charset=utf-8 /title无标题文档/titlestyle type=text/css@-webkit-keyframes wipe { 0% { -webkit-mask-position:0 0;} 100% { -webkit-mask-position:-170px 0;}}.img {-webkit-mask:url(/wp-content/uploads/2011/12/002.png);-webkit-animation:wipe 6s infinite;-webkit-animation-delay:0;-webkit-animation-direction:alternate;}.img:hover {}/style/headbodyimg class=img src=/wp-content/uploads/2011/12/0011.jpg//body/html现在大概来说一下里面用到的属性：-webkit-animati