响应式纯CSS动态点击效果 (可复制源码)

yycvip · 发表于 2024-10-20 10:48:37

HTML部分

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>响应式纯CSS动态点击效果</title>
</head>
<body>
<div class="container">
<div class="item">
<div class="img">
<img src="images/imgs01.png">
</div>
<p>天行健</p>
</div>
<div class="item">
<div class="img">
<img src="images/imgs02.png">
</div>
<p>天行健</p>
</div>
<div class="item">
<div class="img">
<img src="images/imgs03.png">
</div>
<p>天行健</p>
</div>
<div class="item">
<div class="img">
<img src="images/imgs04.png">
</div>
<p>天行健</p>
</div>
<div class="item">
<div class="img">
<img src="images/imgs05.png">
</div>
<p>天行健</p>
</div>
<div class="item">
<div class="img">
<img src="images/imgs06.png">
</div>
<p>天行健</p>
</div>
<div class="item">
<div class="img">
<img src="images/imgs07.png">
</div>
<p>天行健</p>
</div>
<div class="item">
<div class="img">
<img src="images/imgs08.png">
</div>
<p>天行健</p>
</div>
<div class="item">
<div class="img">
<img src="images/imgs09.png">
</div>
<p>天行健</p>
</div>
<div class="item">
<div class="img">
<img src="images/imgs10.png">
</div>
<p>天行健</p>
</div>
<div class="item">
<div class="img">
<img src="images/imgs11.png">
</div>
<p>天行健</p>
</div>
<div class="item">
<div class="img">
<img src="images/imgs12.png">
</div>
<p>天行健</p>
</div>
<div class="item">
<div class="img">
<img src="images/imgs13.png">
</div>
<p>天行健</p>
</div>
<div class="item">
<div class="img">
<img src="images/imgs14.png">
</div>
<p>天行健</p>
</div>
</div>
</body>
</html>

复制代码

CSS部分

body {
width: 100%;
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
background: #efeeee;
}
.container {
width: 700px;
height: 600px;
display: flex;
justify-content: space-around;
align-items: center;
flex-wrap: wrap;
}
.container .item {
display: flex;
justify-content: space-around;
flex-direction: column;
align-items: center;
width: 100px;
height: 140px;
margin: 20px;
}
.container .item .img {
width: 100px;
height: 100px;
box-shadow: 18px 18px 30px rgba(0, 0, 0, 0.1),
-18px -18px 30px rgba(255, 255, 255, 1);
border-radius: 20px;
display: flex;
align-items: center;
justify-content: center;
background: #efeeee;
transition: box-shadow .2s ease-out;
position: relative;
}
.container .item .img img {
width: 60px;
transition: width .2s ease-out;
}
.container .item p {
color: slategray;
}
.container .item .img:hover {
box-shadow: 0 0 0 rgba(0, 0, 0, 0.1),
0 0 0 rgba(255, 255, 255, 1),
inset 18px 18px 30px rgba(0, 0, 0, 0.1),
inset -18px -18px 30px rgba(255, 255, 255, 1);
transition: box-shadow .2s ease-out;
}
.container .item .img:hover img {
width: 58px;
transition: width .2s ease-out;
}

复制代码

		自动登录	找回密码
密码			立即注册