过渡属性 transition：all 1s linear 0s；

最新推荐文章于 2022-10-04 19:30:35 发布

先来个小漩涡

最新推荐文章于 2022-10-04 19:30:35 发布

阅读量1.1w

点赞数 1

分类专栏：高阶文章标签：过渡属性 transition

本文链接：https://blog.csdn.net/weixin_43023873/article/details/99945235

版权

高阶专栏收录该内容

26 篇文章 0 订阅

订阅专栏

过渡属性的作用就是体现元素默认样式与最终样式变化的过程。
代码格式：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 id="\">
			
		</div>
	</body>
</html>

先来个小漩涡

关注

1
点赞
踩
11

收藏

觉得还不错? 一键收藏
0
评论
过渡属性 transition：all 1s linear 0s；

过渡属性的作用就是体现元素默认样式与最终样式变化的过程。代码格式：transition：all 1s linear 0s；注：第一个参数的作用是设置元素的哪些属性过渡，all表示全部过渡，width代表属性宽度过渡，其他不过渡，其他属性也一样。的哥属性设置过渡需要的时长，单位s不能省略。第三个属性设置过渡延迟多少秒执行，单位s不能省略。hover 设置鼠标移到某一元素时状态。tran...
复制链接

扫一扫