App下載

CSS如何實現(xiàn)動畫效果--移動？

猿友 2021-03-20 10:51:27 瀏覽數(shù) (6349)
反饋

開發(fā)網(wǎng)頁時，插入的圖片或形狀永遠固定在一個地方可能會使瀏覽者產(chǎn)生視覺疲勞。如果能讓產(chǎn)生運動效果，就可以完美解決此問題。那么網(wǎng)頁中的運動效果--平移該如何實現(xiàn)呢？這篇文章 W3Cschool 小編教你 CSS 如何實現(xiàn)動畫效果--移動。

實現(xiàn)效果：

CSS實現(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)陰影效果


CSS

0 人點贊