CSS3 transition屬性 實現過渡動畫效果

CSS3:transition屬性

在這裏插入圖片描述
transition: 要過渡的屬性 花費時間 運動曲線 何時開始;

<!DOCTYPE html>
<html lang="zh-CN">
<head>
	<meta charset="UTF-8">
	<title>過渡動畫</title>
	<style>
		div {
			width: 400px;
			height: 100px;
			background-color: pink;
			/*transition: 要過渡的屬性 花費時間 運動曲線 何時開始;*/
			/*如果有多組屬性,用逗號隔開*/
			/*transition: width 1s ease 0s, height 1s ease 0s, background-color 1s ease 0s;*/
			transition: all 1s; /*簡寫,所有屬性都有過渡變化效果*/
		}
		div:hover {
			width: 800px;
			height: 200px;
			background-color: purple;
		}
	</style>
</head>
<body>
	<div></div>
</body>
</html>
發佈了232 篇原創文章 · 獲贊 437 · 訪問量 24萬+
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章