transition: 2s; 过渡效果
多个样式各个样式用逗号隔开即可
transition: width 1s ,height 2s ,background 3s; ：
宽度1s完成变化，高度延迟1s执行，2s完成变化，背景色3s完成变化
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
/* 当鼠标放在黄色的盒子上会有一个过渡的效果 */
/* transition: 2s; */
/* 多个样式各个样式用逗号隔开即可 */
/* 宽度1s完成变化，高度延迟1s执行，2s完成变化，背景色3s完成变化 */
/* transition: width 1s ,height 2s ,background 3s; */
.transition {
width: 100px;
height: 100px;
background: yellow;
/* 过渡 */
transition: 2s;
/* transition: width 2s; */
}
.transition:hover {
width: 500px;
height: 300px;
background-color: blue;
}
</style>
</head>
<body>
<div class="transition"></div>
</body>
</html>
image.png
网友评论