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

七夏（UID：1） · 发表于 2024-10-15 12:41:54

马上注册，结交更多好友，享用更多功能，让你轻松玩转社区。

您需要登录才可以下载或查看，没有账号？立即注册

×

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;
   }

梦淡如非（UID：8） · 发表于 2024-10-15 13:32:27

看看大佬那个友联页面，给扒了吧，感觉整的挺好。鼠标滑过还有内容替换。

七夏（UID：1） · 发表于 2024-10-15 14:03:40

梦淡如非发表于 2024-10-15 13:32
看看大佬那个友联页面，给扒了吧，感觉整的挺好。鼠标滑过还有内容替换。 ...

做米表啊😂

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

马上注册，结交更多好友，享用更多功能，让你轻松玩转社区。

快速回帖

分享帝

龙年限定

福利君

关于楼主

商务推广