列表元素动画
移入元素放大与缩小
细节
- 图片自身样式:
transform: scale(1);与transition: all .5s ease; - 鼠标移入元素:
.item:hover img
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>九宫格布局</title>
<style>
body {
margin: 0;
padding: 0;
}
ul,
li {
margin: 0;
padding: 0;
list-style: none;
}
.container {
width: 948px;
margin: 0 auto;
}
.list {
width: 100%;
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-gap: 24px 24px;
}
.item {
height: 400px;
background: #ca3f3f;
box-shadow: 0 6px 10px 0 rgb(95 101 105 / 15%);
border-radius: 8px;
transition: all 0.2s;
overflow: hidden;
cursor: pointer;
}
img {
width: 100%;
height: 100%;
object-fit: cover;
transform: scale(1);
transition: all .5s ease;
}
.item:hover {
box-shadow: 0 10px 15px -2px rgb(32 35 43 / 22%);
}
.item:hover img {
transform: scale(1.5);
}
</style>
</head>
<body>
<div class='container'>
<ul class='list clearfix'>
<li class='item'>
<img src="./images/0003.jpg" alt="">
</li>
<li class='item'>
<img src="./images/0006.jpg" alt="">
</li>
<li class='item'>
<img src="./images/0008.jpg" alt="">
</li>
<li class='item'>
<img src="./images/0013.jpg" alt="">
</li>
<li class='item'>
<img src="./images/0014.jpg" alt="">
</li>
<li class='item'>
<img src="./images/0015.jpg" alt="">
</li>
<li class='item'>
<img src="./images/0016.jpg" alt="">
</li>
<li class='item'>
<img src="./images/0017.jpg" alt="">
</li>
<li class='item'>
<img src="./images/0018.jpg" alt="">
</li>
</ul>
</div>
</body>
</html>