CSS之transition属性

最新推荐文章于 2024-06-21 17:17:44 发布

程序员库里

最新推荐文章于 2024-06-21 17:17:44 发布

阅读量346

点赞数

分类专栏： css

本文链接：https://blog.csdn.net/chaofei_liang/article/details/78008721

版权

css 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

1.鼠标移动到div中背景颜色慢慢变化（1个属性的变化）

<!DOCTYPE html>
<html>
<head>
	<title></title>
	<style type="text/css">
		#block{
			width: 400px;
			height: 400px;
			background: blue;
			margin: 0 auto;
			transition: background 3s;
		}
		#block:hover{
			background: red;
		}
	</style>
</head>
<body>
<div id="block"></div>
</body>
</html>

2.多个属性的变化

transition:属性时间，属性时间

3.过度模式

transition:属性时间模式

模式：

ease:缓慢开始，缓慢结束

linear:匀速

ease-in:缓慢开始

ease-out:缓慢结束

ease-in-out：缓慢开始，缓慢结束（和ease稍有区别）