过渡或延迟：

最新推荐文章于 2024-07-21 17:58:14 发布

浅沫......

最新推荐文章于 2024-07-21 17:58:14 发布

阅读量92

点赞数 1

文章标签： html

本文链接：https://blog.csdn.net/luoyuanye2003110/article/details/127546496

版权

<!DOCTYPE html>
<html>
   <head>
       <meta charset="utf-8" />
       <title></title>
       <style type="text/css">
           .box{
               width: 400px;
               height: 400px;
               background: pink;
               /* 过渡:transition:属性/all 时间速度延迟*/
               /*速度：linear（匀速） */
               transition: width 4s linear 4s,height 4s linear;
           }
           .box:hover{
               background:orange;
               width: 100px;
               height: 100px;
           }
       </style>
   </head>
   <body>
       <div class="box"></div>
   </body>
</html>

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<style type="text/css">
			.box{
				width: 400px;
				height: 400px;
				background: pink;
				/* 过渡:transition:属性/all 时间 速度 延迟*/
				/*速度：linear（匀速） */
				transition: width 4s linear 4s,height 4s linear;
			}
			.box:hover{
				background:orange;
				width: 100px;
				height: 100px;
			}
		</style>
	</head>
	<body>
		<div class="box"></div>
	</body>
</html>