css3案例分析,CSS3动画/动画库以及案例分析(上)
在這html5遍天下的年代,越來(lái)越多的網(wǎng)頁(yè)也用到了css3的動(dòng)畫(huà)效果,這讓原本我們靜態(tài)的頁(yè)面有了更多的活力。最近也一直在做這方面的頁(yè)面,有些小小的心得,和諸位分享下。
CSS3的動(dòng)畫(huà)絕對(duì)是很贊的,不僅支持PC還支持移動(dòng)端,但也有限制,比如說(shuō)瀏覽器的限制,雖然有這方面的限制,用它的人還是很多的。
CSS3 過(guò)渡(transform)
通過(guò) CSS3,我們可以在不使用 Flash 動(dòng)畫(huà)或 Javas cript 的情況下,當(dāng)元素從一種樣式變換為另一種樣式時(shí)為元素添加效果。
transform屬性能對(duì)元素對(duì)象進(jìn)行變形操作,主要包括以下幾種:旋轉(zhuǎn)rotate、縮放scale、移動(dòng)translate、傾斜skew以及矩陣變形matrix。
過(guò)渡屬性
下面的表格列出了所有的轉(zhuǎn)換屬性:
使用transtion屬性只是規(guī)定了要如何去過(guò)渡,要想讓動(dòng)畫(huà)發(fā)生,還得要有元素狀態(tài)的改變。如何改變?cè)貭顟B(tài)呢,當(dāng)然就是在css中給這個(gè)元素定義一個(gè)類(:hover等偽類也可以),這個(gè)類描述的是過(guò)渡動(dòng)畫(huà)結(jié)束時(shí)元素的狀態(tài)。
關(guān)鍵幀動(dòng)畫(huà)(keyframes)
通過(guò) CSS3,我們能夠創(chuàng)建動(dòng)畫(huà),這可以在許多網(wǎng)頁(yè)中取代動(dòng)畫(huà)圖片、Flash 動(dòng)畫(huà)以及 Javas cript。
@keyframes相當(dāng)于一個(gè)命名空間,后面跟一個(gè)名詞,如果在class中的animation-name定義了與之對(duì)應(yīng)的name,那么就可以執(zhí)行動(dòng)畫(huà)了。定義動(dòng)畫(huà)時(shí),簡(jiǎn)單的動(dòng)畫(huà)可以直接使用關(guān)鍵字from和to,即從一種狀態(tài)過(guò)渡到另一種狀態(tài):如:
@-webkit-keyframes demo{
from{left:0;}
to{left:400px;}
}
復(fù)雜動(dòng)畫(huà):
@-webkit-keyframes demo{
0%{left:0;}
50%{left:200px;}
100%{left:400px;}
}
@keyframes 動(dòng)畫(huà)名稱{
時(shí)間點(diǎn) {元素狀態(tài)}
時(shí)間點(diǎn) {元素狀態(tài)}
}
這里面的百分百有點(diǎn)像flash里幀的概念。表示設(shè)置某個(gè)時(shí)間段內(nèi)任意時(shí)間點(diǎn)的樣式。
CSS3 動(dòng)畫(huà)屬性
下面的表格列出了 @keyframes 規(guī)則和所有動(dòng)畫(huà)屬性:
css3動(dòng)畫(huà)庫(kù)animate.css的使用
animate.css是一個(gè)css3動(dòng)畫(huà)庫(kù),可以到github上去下載,里面預(yù)設(shè)了很多種常用的動(dòng)畫(huà),使用也很簡(jiǎn)單,因?yàn)樗前巡煌膭?dòng)畫(huà)綁定到了不同的類里,所以我們想要使用哪種動(dòng)畫(huà)的時(shí)候,只需要簡(jiǎn)單的把那個(gè)相應(yīng)的類添加到元素上就行了:
css3動(dòng)畫(huà)head
圖片有點(diǎn)大讀取有點(diǎn)慢
總結(jié):
利用css3的動(dòng)畫(huà)效果能做出很多漂亮的效果,但要注意低版本的瀏覽器的不兼容,同時(shí)利用一些工具能讓我們的代碼制作起來(lái)更方便更快捷。
Ps:
很多都是拿圖片放在這里給大家看的這樣更清楚點(diǎn),但很多代碼復(fù)制不了,老規(guī)矩我也會(huì)附上附件給大家看下,有上面的案例,還有的部分 可以去我的個(gè)人博客去看下,地址在我站酷個(gè)人主頁(yè)里有。
下次我會(huì)拿一個(gè)全部是css3的頁(yè)面做給大家看,筆者也是一直在學(xué)習(xí)當(dāng)中,希望各位大神,酷友能多多指點(diǎn)。
總結(jié)
以上是生活随笔為你收集整理的css3案例分析,CSS3动画/动画库以及案例分析(上)的全部?jī)?nèi)容,希望文章能夠幫你解決所遇到的問(wèn)題。
- 上一篇: php mysqliquery 返回值,
- 下一篇: java之NIO(Channel,Buf