427day（过渡效果）

CSS过渡效果详解

最新推荐文章于 2021-11-15 15:50:04 发布

原创最新推荐文章于 2021-11-15 15:50:04 发布 · 121 阅读

0 ·

CC 4.0 BY-SA版权

《2018年年12月4日》【连续12月4日】

标题：过渡效果；
内容：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
		div {
			width: 100px;
			height: 100px;
			background-color: red;
			transition: width .4s ease .1s;
		}
		div:hover {
			width: 200px;
		}

		/*transition-property: 规定应用过渡的CSS属性名称；
		transition-duration: 定义过渡效果花费的时间，默认为0；
		transition-timing-function:规定过度效果的时间曲线。默认说"ease"；
		transition-delay:规定过度效果何时开始。默认为0；*/
	</style>
</head>
<body>
	<div></div>
</body>
</html>