聲明：本欄目所使用的素材都是凱哥學(xué)堂VIP學(xué)員所寫(xiě)，學(xué)員有權(quán)匿名，對(duì)文章有最終解釋權(quán)；凱哥學(xué)堂旨在促進(jìn)VIP學(xué)員互相學(xué)習(xí)的基礎(chǔ)上公開(kāi)筆記。
在CSS3中能夠?qū)崿F(xiàn)一些簡(jiǎn)單的動(dòng)畫(huà)效果，所以接下來(lái)介紹的是幾種基礎(chǔ)的動(dòng)畫(huà)效果制作方式。
首先要認(rèn)識(shí)的是@keyframes規(guī)則，@keyframes是用于定義動(dòng)畫(huà)過(guò)程的規(guī)則，因?yàn)樗^的動(dòng)畫(huà)其實(shí)就是從一套樣式漸變到另一套樣式的過(guò)程，聲明@keyframes需要定義它的名稱，需要要樣式里通過(guò)名稱引用這個(gè)規(guī)則。
在@keyframes里有兩個(gè)屬性：form和to，form屬性用于定義動(dòng)畫(huà)的開(kāi)始，在form里需要定義好樣式的初始狀態(tài)。to屬性則用于定義動(dòng)畫(huà)的結(jié)束，在to里需要定義好樣式的最終狀態(tài)，動(dòng)畫(huà)就是這樣一個(gè)從初始狀態(tài)漸變到最終狀態(tài)的過(guò)程。
之后在樣式描述里需要使用animation屬性來(lái)引用規(guī)則并且定義一個(gè)動(dòng)畫(huà)完成的時(shí)間，單位可以是秒或毫秒。
代碼示例：
運(yùn)行結(jié)果：
使用form和to只能定義開(kāi)始和結(jié)束，如果想要更加細(xì)致的去定義的話，可以使用百分比的方式。0%相當(dāng)于form，100%相當(dāng)于to，還可以設(shè)置25%、50%等等。使用百分比的方式能夠更細(xì)化的方式去定義動(dòng)畫(huà)漸變過(guò)程的樣式，例如從0%到25%背景顏色就會(huì)從紅色漸變到藍(lán)色，然后再?gòu)?5%到50%背景顏色就會(huì)從藍(lán)色漸變到灰色，50%到75%背景顏色就會(huì)從灰色漸變到黑色，50%到75%背景顏色就會(huì)從黑色漸變回紅色，所以每定義一個(gè)%就相當(dāng)于一個(gè)節(jié)點(diǎn)，一個(gè)漸變的節(jié)點(diǎn)。
animation-iteration-count屬性是用來(lái)定義動(dòng)畫(huà)的循環(huán)播放次數(shù)的。
下面使用一個(gè)實(shí)際案例來(lái)說(shuō)明，代碼示例：
運(yùn)行結(jié)果：
margin屬性：
稍微介紹一下margin屬性，這個(gè)屬性是用于調(diào)節(jié)元素的外邊距的，也被稱之為區(qū)塊屬性，這個(gè)屬性有四種寫(xiě)法，可以控制四個(gè)外邊距：上、下、左、右。
示例1：margin: 10px 5px 15px 20px;
意義：
上外邊距是 10px
右外邊距是 5px
下外邊距是 15px
左外邊距是 20px
示例2：margin:10px 5px 15px;
意義：
上外邊距是 10px
右外邊距和左外邊距是 5px
下外邊距是 15px
示例3：margin:10px 5px;
意義：
上外邊距和下外邊距是 10px
右外邊距和左外邊距是 5px
示例4：margin:10px;
意義：所有 4 個(gè)外邊距都是 10px
另外還有介紹一個(gè)屬性：line-height，這個(gè)屬性是用于設(shè)置行高的，一般配合text-align使用，能夠讓元素內(nèi)的文字居中。
代碼示例：
運(yùn)行結(jié)果：
有時(shí)候我們會(huì)發(fā)現(xiàn)元素?zé)o法緊貼瀏覽器的邊框：
在這是因?yàn)閎ody的margin屬性的默認(rèn)值為10px，將body的margin屬性的值改為0px就不會(huì)有這樣的現(xiàn)象了。
代碼示例：
運(yùn)行結(jié)果：
我們可以隨便打開(kāi)一個(gè)網(wǎng)頁(yè)，查看一下網(wǎng)頁(yè)源代碼，可以發(fā)現(xiàn)頁(yè)面上的菜單、導(dǎo)航欄之類的基本都是使用ul無(wú)序列表來(lái)制作的，因?yàn)閡l這種無(wú)序列表包含著的數(shù)據(jù)結(jié)構(gòu)比較好，每一個(gè)li標(biāo)簽都包含一個(gè)數(shù)據(jù)，想要增加數(shù)據(jù)就增加一個(gè)li標(biāo)簽就好了，刪除數(shù)據(jù)也是直接刪除那個(gè)li標(biāo)簽就可以了。而且實(shí)際上使用列表來(lái)做菜單、導(dǎo)航欄什么的，其實(shí)很簡(jiǎn)單：首先使用list-style屬性把無(wú)序列表自帶的黑點(diǎn)樣式給去掉，然后使用float-left屬性讓列表漂浮起。剩下的就是調(diào)一下字體顏色、寬高度、背景顏色、布局等等。
代碼示例：
運(yùn)行結(jié)果：
