仿網(wǎng)易nec首頁(yè)動(dòng)畫(huà)效果(實(shí)現(xiàn)原理+代碼)

2024-07-11 08:50:15

字體：大中小

供稿：網(wǎng)友

仿網(wǎng)頁(yè)nec首頁(yè)動(dòng)畫(huà)效果
nec鏈接：http://nec.netease.com/
首先，介紹animation
animation檢索或設(shè)置對(duì)象所應(yīng)用的動(dòng)畫(huà)特效。
animation由“keyframes”這個(gè)屬性來(lái)實(shí)現(xiàn)這樣的效果。
keyframes具有其自己的語(yǔ)法規(guī)則，他的命名是由"@keyframes"開(kāi)頭，后面緊接著是這個(gè)“動(dòng)畫(huà)的名稱(chēng)”加上一對(duì)花括號(hào)“{}”，括號(hào)中就是一些不同時(shí)間段樣式規(guī)則，有點(diǎn)像我們css的樣式寫(xiě)法一樣。

關(guān)于animation屬性介紹：
animation-name：檢索或設(shè)置對(duì)象所應(yīng)用的動(dòng)畫(huà)名稱(chēng)
animation-duration：檢索或設(shè)置對(duì)象動(dòng)畫(huà)的持續(xù)時(shí)間
animation-timing-function：檢索或設(shè)置對(duì)象動(dòng)畫(huà)的過(guò)渡類(lèi)型
animation-delay：檢索或設(shè)置對(duì)象動(dòng)畫(huà)延遲的時(shí)間
animation-iteration-count：檢索或設(shè)置對(duì)象動(dòng)畫(huà)的循環(huán)次數(shù)
animation-direction：檢索或設(shè)置對(duì)象動(dòng)畫(huà)在循環(huán)中是否反向運(yùn)動(dòng)
animation-play-state：檢索或設(shè)置對(duì)象動(dòng)畫(huà)的狀態(tài)。w3c正考慮是否將該屬性移除，因?yàn)閯?dòng)畫(huà)的狀態(tài)可以通過(guò)其它的方式實(shí)現(xiàn)，比如重設(shè)樣式

nec動(dòng)畫(huà)實(shí)現(xiàn)原理：
采用三層背景層、氣泡層、文字鏤空層。氣泡層通過(guò)animation屬性實(shí)現(xiàn)了運(yùn)動(dòng)效果。

html結(jié)構(gòu)：

復(fù)制代碼

上一篇：div+css背景漸變色代碼示例

下一篇：Button未設(shè)type屬性時(shí)在非IE6/7中具有submit特性并自動(dòng)提交form