CSS3已經(jīng)不再是Web前端開(kāi)發(fā)中的新鮮事物，而其中的一個(gè)非常有趣的特性便是
動(dòng)畫(huà)。通過(guò)CSS3的
animation和transform屬性，我們可以創(chuàng)造出各種各樣的動(dòng)畫(huà)效果，為頁(yè)面帶來(lái)更大的交互性和視覺(jué)效果。
div {
width: 100px;
height: 100px;
background-color: red;
animation-name: example;
animation-duration: 2s;
animation-iteration-count: infinite;
}
@keyframes example {
0% {
transform: translateX(0px);
}
50% {
transform: translateY(50px);
}
100% {
transform: translateX(100px);
}
}上面的代碼實(shí)現(xiàn)了一個(gè)簡(jiǎn)單的
動(dòng)畫(huà)效果，當(dāng)我們將鼠標(biāo)懸停在這個(gè)
上時(shí)，會(huì)看到它像是沿著一個(gè)斜線運(yùn)動(dòng)。這個(gè)動(dòng)畫(huà)效果的實(shí)現(xiàn)主要依靠
animation和transform屬性。animation屬性可以讓我們定義一個(gè)動(dòng)畫(huà)效果的名稱、時(shí)長(zhǎng)、播放次數(shù)等等，而transform屬性則可以改變?cè)氐男螤睢⒋笮 ⑽恢玫鹊取Ｊ褂眠@兩個(gè)屬性，我們可以輕松地實(shí)現(xiàn)各種炫酷的
動(dòng)畫(huà)效果，例如旋轉(zhuǎn)、翻轉(zhuǎn)、縮放、移動(dòng)、抖動(dòng)等等。
不過(guò)，要注意的是，
動(dòng)畫(huà)的過(guò)多使用會(huì)使得頁(yè)面加載變慢，并可能導(dǎo)致性能問(wèn)題。因此，我們?cè)谠O(shè)計(jì)
動(dòng)畫(huà)效果時(shí)，應(yīng)該注重頁(yè)面性能，合理使用
animation和transform屬性，避免過(guò)度使用。上一篇php dwt
下一篇php echo 用法