1. 動畫
通過 CSS3氏义,我們能夠創(chuàng)建動畫,這可以在許多網(wǎng)頁中取代動畫圖片、Flash 動畫以及 JavaScript采幌。
- CSS3 @keyframes 規(guī)則
如需在 CSS3 中創(chuàng)建動畫,您需要學(xué)習(xí) @keyframes 規(guī)則震桶。
@keyframes 規(guī)則用于創(chuàng)建動畫休傍。在 @keyframes 中規(guī)定某項 CSS 樣式,就能創(chuàng)建由當(dāng)前樣式逐漸改為新樣式的動畫效果蹲姐。 - 當(dāng)您在 @keyframes 中創(chuàng)建動畫時磨取,請把它捆綁到某個選擇器,否則不會產(chǎn)生動畫效果柴墩。
通過規(guī)定至少以下兩項 CSS3 動畫屬性忙厌,即可將動畫綁定到選擇器:
- 規(guī)定動畫的名稱
- 規(guī)定動畫的時長
1.animation-name 2. animation-duration 3. animation-timing-function 4. animation-delay 5. animation-iteration-count:n|infinite 屬性定義動畫的播放次數(shù)。6. animation-direction: normal|alternate;animation-direction 屬性定義是否應(yīng)該輪流反向播放動畫江咳。 7. animation-play-state:paused|running 屬性規(guī)定動畫正在運行還是暫停逢净。8. animation-fill-mode 屬性規(guī)定動畫在播放之前或之后,其動畫效果是否可見。animation-fill-mode : none | forwards | backwards | both;.
2. 多列(column)
通過 CSS3爹土,您能夠創(chuàng)建多個列來對文本進行布局 - 就像報紙那樣甥雕!
1.column-count 2. column-gap 3. column-rule:1px solid red; 4. column-span 5. column-width.