无码人妻视频一区二区三区,亚洲国产精品色一区二区三区色牛,亚洲国产中文精品碰碰,九九视频这里只有精品

2235瀏覽量

因?yàn)镃SS3,動(dòng)畫將一切皆有可能

來源: 時(shí)間:2012-12-17

   熱火朝天的css3無疑吸引了很多前端開發(fā)者的眼球,然而在css3中的動(dòng)畫屬性則是新功能中的主打招牌,說到css3的動(dòng)畫屬性不得不讓人想起這三個(gè)屬性:Transform﹑Transition﹑Animation。 transform屬性雖然看起來可以實(shí)現(xiàn)動(dòng)畫的效果,但本質(zhì)其實(shí)是靜態(tài)的,說白一點(diǎn)其實(shí)就是一個(gè)圖形的變形工具;而transition屬性是一個(gè)簡(jiǎn)單 的動(dòng)畫屬性,操作起來非常的簡(jiǎn)單;在這里主要為大家介紹Animations屬性,這是個(gè)名副其實(shí)的動(dòng)畫屬性,雖然官方也沒有過多的介紹,只是簡(jiǎn)要的說明 這個(gè)屬性是transition屬性的擴(kuò)展,但功能可謂十分的強(qiáng)大,Animations可以定義多個(gè)關(guān)鍵幀以及定義每個(gè)關(guān)鍵幀中元素的屬性值來實(shí)現(xiàn)復(fù)雜 的動(dòng)畫效果。那么Animation可以做出怎樣的動(dòng)畫呢?可以這么說吧,只要你有創(chuàng)意,你會(huì)折騰,那么將一切皆有可能。

相信大家對(duì)這個(gè)屬性也是比較了解的,所以也不過多的介紹其基礎(chǔ)知識(shí)。不是很了解的話,可以在網(wǎng)上找一下基礎(chǔ)知識(shí),有很多相關(guān)的資料可以查閱。

在這里就跟大家說一下一個(gè)非常重要的標(biāo)簽:keyframes。動(dòng)畫該怎么動(dòng)?都全靠它了。keyframes的基本原理類似于flash的時(shí)間軸和關(guān)鍵幀,所以可以制作出很豐富的動(dòng)畫出來??纯春?jiǎn)單的例子:

@keyframes demos{

from{transform:translate(0,0);}

20%{transform:translate(20,20);}

40%{transform:translate(40,0);}

60%{transform:translate(60,20);}

80%{transform:translate(80,0);}

to{transform:translate(100,20);}

}

上面的例子設(shè)置了一個(gè)名為“demos”的動(dòng)畫,其中的from、20%、40%、60%、80%、to分別代表了在不同時(shí)間點(diǎn)上所對(duì)應(yīng)的屬性效果 (from、to可以用0%和100%來表示,注意的是0%不可以縮寫成0)。由此可見,我們可以設(shè)置多個(gè)時(shí)間點(diǎn)的對(duì)應(yīng)屬性效果,這樣子就極大的豐富了我 們的動(dòng)畫效果。而在任意兩個(gè)時(shí)間點(diǎn)上,Animation會(huì)自動(dòng)計(jì)算中間的過渡效果,同時(shí)我們也可以通過設(shè)置Animation來對(duì)時(shí)間段進(jìn)行控制從而達(dá) 到高質(zhì)量的動(dòng)畫。相對(duì)比于flash來說,Animation動(dòng)畫屬性卻毫不遜色,最大的優(yōu)勢(shì)是制作簡(jiǎn)單,僅僅的幾行代碼,卻可以渲染出豐富的動(dòng)畫,這是 flash望塵莫及的。

上面鏈接是給大家整理一個(gè)示例頁面,其中的例子一部分是我自己制作的,一部分是來源于網(wǎng)絡(luò)收集的,旨在為大家展示更多更精彩的動(dòng)畫效果,讓大家可以學(xué)習(xí)的 更多,如果你也有好的idea,歡迎分享給我們,添加到這個(gè)頁面來,這個(gè)示例頁面也將會(huì)不定期的持續(xù)更新,讓更多的人都知道,因?yàn)镃SS3,動(dòng)畫一切皆有 可能

聯(lián)系我們

一次需求提交或許正是成就一個(gè)出色產(chǎn)品的開始。
歡迎填寫表格或發(fā)送合作郵件至: qczsky@126.com

大理青橙科技

電話:13988578755 13988578755

郵箱:qczsky@126.com

地址:大理市下關(guān)龍都春天10層

如果您無法識(shí)別驗(yàn)證碼,請(qǐng)點(diǎn)圖片更換

潮州市| 台北县| 平阳县| 乐陵市| 南平市| 高密市| 晋江市| 昆山市| 黄大仙区| 马鞍山市| 巴林左旗| 健康| 沁阳市| 绥芬河市| 三河市| 神木县| 新巴尔虎右旗| 新源县| 寿阳县| 洮南市| 重庆市| 临潭县| 农安县| 繁昌县| 西乌珠穆沁旗| 汽车| 赫章县| 文昌市| 仪陇县| 陵水| 广饶县| 休宁县| 临漳县| 镇原县| 呼伦贝尔市| 赣榆县| 镇江市| 岐山县| 上杭县| 昌吉市| 林西县|