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代码：最终效果如下：蒙版除了用半透明的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来制作自动移动的蒙版，复制下面的代码，自行进行测试：无标题文档-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 现在大概来说一下里面用到的属性：-webkit-animation：定义一段动画属性，比如上面用到的名字（wipe）、持续的时间（6s）、循环次数（infinite无限循环）、延续时间(delay)、方向（direction）。-webkit-keyframes：则对每一个动画定义时间轴，可以设置某个时间动画作用的元素是什么状态。里面分别设置了0%时是什么位置，100%时是什么位置。在animation的keyframes里, 每一帧不会默认继承前一帧的属性, 所以: Javascript代码 1. -webkit-keyframestest 2. 0%left:50px;top:100px; 3. 100%left:200px; 4. -webkit-keyframes test 0% left: 50px; top: 100px; 100% left: 200px; 不等于 Javascript代码 1. -webkit-keyframestest 2. 0%left:50px;top:100px; 3. 100%left:200px;top:100px; 4. -webkit-animation:仍旧是一个复合属性，-webkit-animation: name duration timing-function delay iteration_count direction;包括以下几个属性（1） -webkit-animation-name 这个属性的使用必须结合-webkit-keyframes一起使用eg: -webkit-keyframesfontchange0%font-size:10px;30%font-size:15px;100%font-siez:12px;百分比的意思就是duration的百分比，如果没有设置duration的话，则表示为无穷大div -webkit-animation-name:fontchange;（2）-webkit-animation-duration 表示动画持续的时间（3）-webkit-animation-timing-function 表示动画使用的时间曲线【语法】： -webkit-animation-timing-function: ease | linear | ease-in | ease-out | ease-in-out（4）-webkit-animation-delay 表示开始动画之前的延时【语法】 -webkit-animation-delay: delay_time;（5）-webkit-animation-iteration-count 表示动画要重复几次【语法】-webkit-animation-iteration-count: times_number;（6） -webkit-animation-direction 表示动画的方向【语法】-webkit-animation-direction: normal(默认) | alternatenormal 方向始终向前alternate 当重复次数为偶数时方向向前，奇数时方向相反【另外】跟animation有关的其他属性（1）-webkit-animation-fill-mode : none (默认)| backwards | forwards | both 设置动画开始之前和结束之后的行为（测试结果不是很清晰）（2）-webkit-animation-play-state: running（默认） | paused 设置动画的运行状态综合案例：-webkit-keyframes fontbulger 0% font-size: 10px;30% font-size: 15px;100% font-size: 12px;#box -webkit-animation-name: fontbulger;-webkit-animation-duration: 1s;-webki