開發(fā)網(wǎng)頁時,插入的圖片或形狀永遠(yuǎn)固定在一個地方可能會使瀏覽者產(chǎn)生視覺疲勞。如果能讓產(chǎn)生運動效果,就可以完美解決此問題。那么網(wǎng)頁中的運動效果--平移該如何實現(xiàn)呢?這篇文章 W3Cschool 小編教你 CSS 如何實現(xiàn)動畫效果--移動。
實現(xiàn)效果:
思路
首先我們新建一個正方形,用?<svg></svg>
?標(biāo)簽的?<rect></rect>
?可以直接定義一個正方形。隨后用?<animate>
?即可定義動畫效果。
<animate>的幾個常用屬性定義如下:
- attributeName:指定哪個屬性需要產(chǎn)生動畫效果;
- from:指定屬性的起始值;
- to:指定屬性的結(jié)束值;
- dur:指定動畫運行的時間(持續(xù)時間);
- fill=“freeze|remove”:指定動畫播放完畢后是停留在播放的終點還是回到起始位置;
- repeatCount:指定動畫的重復(fù)播放次數(shù),無限重復(fù)動畫:indefinite ;
具體代碼
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>平移動畫- 編程獅(w3cschool.cn)</title>
</head>
<body>
<svg width="500" height="150">
<rect width="150" height="150" fill="red"> <!-- 創(chuàng)建一個正方形 -->
<animate attributeName="x" from="0" to="300" dur="3s" fill="freeze" repeatCount="2"/>
</rect>
</svg>
</body>
</html>
以上就是 CSS 如何實現(xiàn)動畫效果--移動的全部內(nèi)容。更多 CSS 相關(guān)教程請關(guān)注 W3Cschool 官網(wǎng)。
相關(guān) CSS 效果:CSS如何設(shè)置圖片旋轉(zhuǎn)、CSS如何實現(xiàn)陰影效果