响应式纯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;
   }
小时候,看腻了农村的牛和马,长大后,来到了城里,才知道原来到处都是牛马!
全部回复2 显示全部楼层
梦淡如非(UID:8) 发表于 2024-10-15 13:32:27 | 显示全部楼层
看看大佬那个友联页面,给扒了吧,感觉整的挺好。鼠标滑过还有内容替换。
七夏(UID:1) 发表于 2024-10-15 14:03:40 | 显示全部楼层
梦淡如非 发表于 2024-10-15 13:32
看看大佬那个友联页面,给扒了吧,感觉整的挺好。鼠标滑过还有内容替换。 ...

做米表啊😂
小时候,看腻了农村的牛和马,长大后,来到了城里,才知道原来到处都是牛马!

快速回帖

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

1楼
2楼
3楼

关于楼主

管理员
  • 主题

    745
  • 回答

    264
  • 积分

    1980
虚位以待,此位置招租

商务推广

    网盘拉新-短剧推广 此位置招租 此位置招租 此位置招租 此位置招租 此位置招租 此位置招租 此位置招租 此位置招租 此位置招租