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>

猜你喜欢

转载自blog.csdn.net/jal517486222/article/details/104311748