IT评测·应用市场-qidao123.com技术社区

标题: 前端练习＜Html&CSS＞——照片墙（附完整代码及实现结果） [打印本页]
作者: 李优秀    时间: 2024-8-18 22:42
标题: 前端练习＜Html&CSS＞——照片墙（附完整代码及实现结果）
这个小练习也泉源于b站up小K师兄，大家可以通过下面的链接学习哦~up讲的非常详细。
纯CSS写一个简单酷炫的照片墙结果～
先看一下这个照片墙的结果：
1.鼠标没有放到图片上时，照片同比例，每张照片都有倒影的结果。

2.然后是鼠标放置图片上的结果，图片被放大，其他照片旋转缩放，这里必要注意，左右双方的照片是对称倾斜的。


HTML结构


CSS样式


实现原理

这段代码通过CSS的transform属性和transition属性实现了3D翻转结果。当鼠标悬停在容器上时，除了悬停的图片容器之外的其他图片容器会向两侧移动，并添加阴影结果和3D旋转。当鼠标悬停在某个图片容器上时，该图片容器会放大并旋转。
完整的代码：

  1. <!DOCTYPE html>
  2. <html>
  3.         <head>
  4.                 <meta charset="utf-8">
  5.                 <title></title>
  6.                 <style type="text/css">
  7.                         /* 设置所有元素的边距和内边距为0，并设置box-sizing为border-box，使元素的宽度和高度包括边框和内边距 */
  8.                         * {
  9.                                 margin: 0;
  10.                                 padding: 0;
  11.                                 box-sizing: border-box
  12.                         }
  14.                         /* 设置body的居中显示，最小高度为100vh，背景颜色为#1a252c */
  15.                         body {
  16.                                 display: flex;
  17.                                 justify-content: center;
  18.                                 align-items: center;
  19.                                 min-height: 100vh;
  20.                                 background-color: #1a252c;
  21.                         }
  23.                         /* 设置容器的相对定位，居中显示，设置transform-origin为preserve-3d */
  24.                         .container {
  25.                                 position: relative;
  26.                                 display: flex;
  27.                                 justify-content: center;
  28.                                 align-items: center;
  29.                                 transform-origin: preserve-3d;
  30.                         }
  32.                         /* 设置box的宽度、高度、相对定位、过渡效果、设置-webkit-box-reflect为下方1px的线性渐变 */
  33.                         .container .box {
  34.                                 width: 300px;
  35.                                 height: 300px;
  36.                                 position: relative;
  37.                                 transition: .5s;
  38.                                 -webkit-box-reflect: below 1px linear-gradient(transparent, #0002);
  39.                         }
  41.                         /* 设置box的绝对定位，宽度、高度为100% */
  42.                         .container .box img {
  43.                                 position: absolute;
  44.                                 top: 0;
  45.                                 left: 0;
  46.                                 width: 100%;
  47.                                 height: 100%;
  48.                         }
  50.                         /* 设置鼠标悬停时，非悬停元素的边距为-20px，设置filter为drop-shadow(0 0 25px #000) drop-shadow(0 0 25px #000)，设置transform为perspective(500px) rotateY(45deg) scale(0.95) */
  51.                         .container:hover> :not(:hover) {
  52.                                 margin: 0 -20px;
  53.                                 filter: drop-shadow(0 0 25px #000) drop-shadow(0 0 25px #000);
  54.                                 transform: perspective(500px) rotateY(45deg) scale(0.95);
  55.                         }
  57.                         /* 设置鼠标悬停时，box的兄弟元素的transform为perspective(500px) rotateY(-45deg) scale(0.95) */
  58.                         .container .box:hover~.box {
  59.                                 transform: perspective(500px) rotateY(-45deg) scale(0.95);
  60.                         }
  62.                         /* 设置鼠标悬停时，box的transform为perspective(500px) rotateY(0) scale(1.2) */
  63.                         .container .box:hover {
  64.                                 transform: perspective(500px) rotateY(0) scale(1.2);
  65.                         }
  66.                 </style>
  68.         </head>
  69.         <body>
  70.                 <!-- 设置容器的class为container -->
  71.                 <div class="container">
  72.                         <!-- 设置box的class为box，并设置img的src为1.webp -->
  73.                         <div class="box">
  74.                                 <img src="./1.webp" alt="" />
  75.                         </div>
  76.                         <!-- 设置box的class为box，并设置img的src为2.webp -->
  77.                         <div class="box">
  78.                                 <img src="./2.webp" alt="" />
  79.                         </div>
  80.                         <!-- 设置box的class为box，并设置img的src为3.webp -->
  81.                         <div class="box">
  82.                                 <div class="box">
  83.                                         <img src="./3.webp" alt="" />
  84.                                 </div>
  87.                         </div>
  88.                         <!-- 设置box的class为box，并设置img的src为4.webp -->
  89.                         <div class="box">
  90.                                 <img src="./4.webp" alt="" />
  91.                         </div>
  92.                         <!-- 设置box的class为box，并设置img的src为5.webp -->
  93.                         <div class="box">
  94.                                 <img src="./5.webp" alt="" />
  95.                         </div>
  96.                         <!-- 设置box的class为box，并设置img的src为6.webp -->
  97.                         <div class="box">
  98.                                 <img src="./6.webp" alt="" />
  99.                         </div>
  100.                 </div>
  101.         </body>
  102. </html>v>
  103.                         <!-- 设置box的class为box，并设置img的src为4.webp -->
  104.                         <div class="box">
  105.                                 <img src="./4.webp" alt="" />
  106.                         </div>
  107.                         <!-- 设置box的class为box，并设置img的src为5.webp -->
  108.                         <div class="box">
  109.                                 <img src="./5.webp" alt="" />
  110.                         </div>
  111.                         <!-- 设置box的class为box，并设置img的src为6.webp -->
  112.                         <div class="box">
  113.                                 <img src="./6.webp" alt="" />
  114.                         </div>
  115.                 </div>
  116.         </body>
  117. </html>
复制代码


免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。



欢迎光临 IT评测·应用市场-qidao123.com技术社区 (https://dis.qidao123.com/) Powered by Discuz! X3.4