webkit內(nèi)核瀏覽器-webkit-animation實(shí)現(xiàn)蒙版遮罩和動(dòng)畫效果.docx

-webkit-transform定義了元素的變形，-webkit-transition定義了元素的屬性變化樣式，-webkit-animation與-webkit-keyframes則真正的讓元素動(dòng)起來（不只是變到什么狀態(tài)，更定義了中間過程）讓元素動(dòng)起來 -webkit-animation定義一段動(dòng)畫屬性，比如名字，持續(xù)時(shí)間，當(dāng)前狀態(tài)等。-webkit-keyframes則對(duì)每一個(gè)動(dòng)畫定義時(shí)間軸，可以設(shè)置某個(gè)時(shí)間動(dòng)畫作用的元素是什么狀態(tài)。-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的動(dòng)畫屬性：名字是rotateA等。-webkit-keyframes rotateA 針對(duì)name是rotateA的動(dòng)畫設(shè)置時(shí)間軸：0%位置時(shí)什么樣，100%位置時(shí)什么樣。css3 animation的所有屬性及詳細(xì)解釋在/TR/css3-animations/-webkit-keyframes test 0% left: 50px; top: 100px; 100% left: 200px; top: 100px; webkit內(nèi)核瀏覽器實(shí)現(xiàn)蒙版遮罩和動(dòng)畫效果熟悉photoshop的同學(xué)都知道，它里面有蒙版遮罩層的效果，在webkit內(nèi)核的瀏覽器中同樣可以實(shí)現(xiàn)。在本文中我將使用以下幾個(gè)標(biāo)簽，來實(shí)現(xiàn)圖層蒙版和動(dòng)畫效果。-webkit-mask-webkit-mask屬性非常強(qiáng)大，它讓為一個(gè)元素添加蒙板成為可能，這和ps里面的蒙板功能是一樣的。如下例所示：背景圖片：蒙版層：css樣式：.img-webkit-mask:url(002.png);html代碼：最終效果如下：蒙版除了用半透明的png圖片，還可以用它自身的樣式來實(shí)現(xiàn)，如下例所示，當(dāng)它的alpha值為0的時(shí)候會(huì)覆蓋下面的元素，為1的時(shí)候會(huì)完全顯示下面的內(nèi)容。css樣式：.img-webkit-mask:-webkit-gradient(linear,0% 0%, 0% 100%, from(rgba(0,0,0,1), to(rgba(0,0,0,0);最終效果：漸變的寫法具體參考css3實(shí)現(xiàn)背景顏色線性漸變。-webkit-mask-position:移動(dòng)的蒙版-webkit-mask還有另外一個(gè)重要屬性，它可以設(shè)置蒙版的位置，下面我們通過一個(gè)例子來講述一下：css樣式：.img-webkit-mask:url(002.png);-webkit-mask-position:0 0;.img:hover-webkit-mask-position:-83px -83px;html樣式不變，最終效果如下(左邊為正常狀態(tài)，右邊為鼠標(biāo)移動(dòng)上去的狀態(tài))：這里，我們還可以用-webkit-animation來制作自動(dòng)移動(dòng)的蒙版，復(fù)制下面的代碼，自行進(jìn)行測(cè)試：無標(biāo)題文檔-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 現(xiàn)在大概來說一下里面用到的屬性：-webkit-animation：定義一段動(dòng)畫屬性，比如上面用到的名字（wipe）、持續(xù)的時(shí)間（6s）、循環(huán)次數(shù)（infinite無限循環(huán)）、延續(xù)時(shí)間(delay)、方向（direction）。-webkit-keyframes：則對(duì)每一個(gè)動(dòng)畫定義時(shí)間軸，可以設(shè)置某個(gè)時(shí)間動(dòng)畫作用的元素是什么狀態(tài)。里面分別設(shè)置了0%時(shí)是什么位置，100%時(shí)是什么位置。在animation的keyframes里, 每一幀不會(huì)默認(rèn)繼承前一幀的屬性, 所以: 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:仍舊是一個(gè)復(fù)合屬性，-webkit-animation: name duration timing-function delay iteration_count direction;包括以下幾個(gè)屬性（1） -webkit-animation-name 這個(gè)屬性的使用必須結(jié)合-webkit-keyframes一起使用eg: -webkit-keyframesfontchange0%font-size:10px;30%font-size:15px;100%font-siez:12px;百分比的意思就是duration的百分比，如果沒有設(shè)置duration的話，則表示為無窮大div -webkit-animation-name:fontchange;（2）-webkit-animation-duration 表示動(dòng)畫持續(xù)的時(shí)間（3）-webkit-animation-timing-function 表示動(dòng)畫使用的時(shí)間曲線【語法】： -webkit-animation-timing-function: ease | linear | ease-in | ease-out | ease-in-out（4）-webkit-animation-delay 表示開始動(dòng)畫之前的延時(shí)【語法】 -webkit-animation-delay: delay_time;（5）-webkit-animation-iteration-count 表示動(dòng)畫要重復(fù)幾次【語法】-webkit-animation-iteration-count: times_number;（6） -webkit-animation-direction 表示動(dòng)畫的方向【語法】-webkit-animation-direction: normal(默認(rèn)) | alternatenormal 方向始終向前alternate 當(dāng)重復(fù)次數(shù)為偶數(shù)時(shí)方向向前，奇數(shù)時(shí)方向相反【另外】跟animation有關(guān)的其他屬性（1）-webkit-animation-fill-mode : none (默認(rèn))| backwards | forwards | both 設(shè)置動(dòng)畫開始之前和結(jié)束之后的行為（測(cè)試結(jié)果不是很清晰）（2）-webkit-animation-play-state: running（默認(rèn)） | paused 設(shè)置動(dòng)畫的運(yùn)行狀態(tài)綜合案例：-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