过渡属性 transition:all 1s linear 0s;

时间:2025-01-19 08:13:56

过渡属性的作用就是体现元素默认样式与最终样式变化的过程。
代码格式:transition:all 1s linear 0s;
注:

第一个参数的作用是设置元素的哪些属性过渡,all表示全部过渡,width代表属性宽度过渡,其他不过渡,其他属性也一样。
的哥属性设置过渡需要的时长,单位s不能省略。
第三个属性设置过渡延迟多少秒执行,单位s不能省略。
hover 设置鼠标移到某一元素时状态。
transition 这个属性既可以添加在元素默认状态,也可以添加在鼠标上移状态即添加在hover标签内,区别就是第二种做法在鼠标离开时候不会发生过渡变化。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>过渡属性</title>
		<style type="text/css">
			div{
				width: 200px;
				height: 200px;
				background-color: green;
				
				transition:all 1s linear 0s;
				 
			}
			div:hover{
				width: 600px;
				background-color: yellow;
			}
		</style>
	</head>
	<body>
		<div >
			
		</div>
	</body>
</html>