App下載

CSS如何實(shí)現(xiàn)動(dòng)畫(huà)效果--移動(dòng)？

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

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

實(shí)現(xiàn)效果：

CSS實(shí)現(xiàn)動(dòng)畫(huà)效果

思路

首先我們新建一個(gè)正方形，用?<svg></svg>?標(biāo)簽的?<rect></rect>?可以直接定義一個(gè)正方形。隨后用?<animate>?即可定義動(dòng)畫(huà)效果。

<animate>的幾個(gè)常用屬性定義如下：

  •     attributeName:指定哪個(gè)屬性需要產(chǎn)生動(dòng)畫(huà)效果；
  •     from：指定屬性的起始值；
  •     to：指定屬性的結(jié)束值；
  •     dur：指定動(dòng)畫(huà)運(yùn)行的時(shí)間（持續(xù)時(shí)間）；
  •     fill=“freeze|remove”：指定動(dòng)畫(huà)播放完畢后是停留在播放的終點(diǎn)還是回到起始位置；
  •     repeatCount：指定動(dòng)畫(huà)的重復(fù)播放次數(shù)，無(wú)限重復(fù)動(dòng)畫(huà)：indefinite ；

具體代碼

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>平移動(dòng)畫(huà)- 編程獅(w3cschool.cn)</title>
</head>
<body>
	<svg width="500" height="150">
		<rect width="150" height="150" fill="red"> <!-- 創(chuàng)建一個(gè)正方形 -->
  			<animate attributeName="x" from="0" to="300" dur="3s" fill="freeze" repeatCount="2"/> 
    	</rect>
	</svg>
</body>
</html>

以上就是 CSS 如何實(shí)現(xiàn)動(dòng)畫(huà)效果--移動(dòng)的全部?jī)?nèi)容。更多 CSS 相關(guān)教程請(qǐng)關(guān)注 W3Cschool 官網(wǎng)。

相關(guān) CSS 效果：CSS如何設(shè)置圖片旋轉(zhuǎn)、CSS如何實(shí)現(xiàn)陰影效果


CSS

0 人點(diǎn)贊