<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>donghua</title>
<style>
.box {
height: 400px;
width: 700px;
border:1px solid red;
overflow: hidden;
/*指定过度属性*/
transition-property:
border;
/*指定持续时间*/
transition-duration: 2s;
}
.box:hover {
border: 12px solid teal;
}
div img {
width: 100%;
height: 100%;
transition-property:
transform;
transition-duration: 3s;
transition-duration:
linear;
}
.box:hover > img {
transform:scale(2)
}
</style>
</head>
<body>
<div class="box">
<img src="./images/01.jpg" alt="">
</div>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
阅读背景：
过渡效果_归尘
来源：互联网
分享到：
