CSSCustomShapesGridLayout3

本系列的主要挑战都是尽量使用少量的html标签。以下示例也使用相同的html代码。不会有其他的div，嵌套元素等，只需要上面的代码结构。然后看CSS代码：.gallery{--g:6px;/*间隙*/display:grid;宽度：450px；/*大小*/纵横比：1；/*等高*/grid:auto-flow1fr/repeat(3,1fr);gap:var(--g);}.galleryimg:nth-child(2){grid-area:1/2/span2/span2;}.??galleryimg:nth-child(3){网格区域:2/1/span2/span2;}根据上面的CSS可以看出整个盒子被分成了一个3??3个格子，第二张和第二张三张图片都有相应的格子属性设置，并且第一张和最后一张图片将自动环绕布局。这里的核心代码是grid:auto-flow1fr/repeat(3,1fr);，这里使用了CSSgrid简写属性，相当于下面的代码：grid-template-columns:repeat(3,1fr);网格自动行：1fr；缩写属性对应各个属性的值，通过浏览器DevTools可以看到如下数据。这也适用于网格区域属性，当我们将CSS网格区域定义为：grid-area:1/2/span2/span2;最终对应的具体属性值如下：grid-row-start:1;/*从第一行开始*/grid-column-start:2;/*从第二列开始*/grid-row-end:span2;/*占据两行*/grid-column-end:span2;/*占据两列*/根据上面的网格区域声明，这导致如下：我们的第二张和第三张图像在中间重叠，这是故意重叠它们以便可以使用clip-path，从Cutoutpartof两张图片得到最终效果：我们可以使用CSSclip-path属性裁剪第二张图片（img:nth-child(2)）的左下角：clip-path:polygon(00,100%0,100%100%,calc(50%+var(--g)/4)100%,0calc(50%-var(--g)/4))裁剪第三张图片(img:nth-child(3)):clip-path:polygon(00,calc(50%-var(--g)/4)0,100%calc(50%+var(--g)/4),100%100%,0100%);如果你不了解clip-path的使用，我有一篇文章详细介绍了如何使用这种技术。案例2图片分割效果接下来我们将基于上述裁剪图片技术结合鼠标悬停完成一个不错的交互效果。这个效果的网格配置没有前一个强，因为我们只需要两个重叠的图像：.gallery{display:grid;}.gallery>img{grid-area:1/1;宽度：350px；/*大小*/纵横比：1；/*等高*/}悬停效果取决于动画剪辑路径。我们将详细剖析第一张图片的代码以查看其实现方式，然后将相同的代码应用于具有更新值的第二张图片。仔细分析会发现动画过程中会出现三种不同的状态：当图像未悬停时，每个图像显示一半。当鼠标悬停在第一张图片上时，它会显示得更完整，但会保留一个小角。当鼠标悬停在第二张图片上时，从第一张图片中只能看到一个小三角形。在每个州我们都有一个三角形。这意味着我们需要一个三点多边形作为剪辑路径值。什么？你可能会疑惑，第二种状态不是三角形，而是切角的正方形。肉眼看确实是一个四角倒角的正方形，但仔细观察可以看到一个“隐藏”的三角形，在图像上加一个盒子阴影更清晰。盒子阴影：000200px红色；这是什么原理？这个想法是clip-path接受0%-100%范围之外的值，这将允许我们创建“溢出”元素本身的形状。这样我们只需要使用三个点而不是五个点就可以达到我们想要的效果。最终图片的clip-path属性值如下：.gallery>img:first-child{clip-path:polygon(00,calc(100%+var(--_p))0,0calc(100%+var(--_p)))}.gallery>img:last-child{剪辑路径：多边形(100%100%,100%calc(0%-var(--_p)),calc(0%-var(--_p))100%)}这里加入了--_p变量，就是两个图之间的差距距离。在我们添加悬停过渡时，基于此优化代码。我们不需要更新整个剪辑路径，只需要更新这个变量来获取动画。最后是添加hover后的完整代码：.gallery{--g:8px;/*间隙*/}.gallery>img{/*等*/--_p:calc(-1*var(--g));过渡：.4s.1s;}.gallery:hover>img:last-child,.gallery:hover>img:first-child:hover{--_p:calc(50%-var(--g));}.gallery:hover>img:first-child,.gallery:hover>img:first-child:hover+img{--_p:calc(-50%-var(--g));}case三饼图效果这个效果我们增加了难度，类似于上面的效果，但是增加到四张图片而不是两张。每个图像都是四分之一圆，在鼠标悬停时，基于动画的动画将一个图像转换为一个完整的圆，覆盖其余部分。是不是很爽，接下来开始具体的实现过程。首先给整个元素添加border-radius:50%使其变圆。然后为每个图像设置clip-path值。剪辑路径由七个点组成，其中三个位于固定位置。如上图所示，默认为三角形。悬停时，修改剩余点的值并添加过渡动画。过渡：变换.2s，剪辑路径.3s.2s，z-index0s；但是当它运行缓慢时，效果看起来并不那么酷，但是我们可以看到clip-path在形状之间是如何变化的。下面是第一张图片的代码，其他图片类似，只是对应方向的值不同：.gallery>img:nth-child(1){clip-path:polygon(50%50%,calc(50%*var(--_i,0))计算(120%*var(--_i,0)),0计算(100%*var(--_i,0)),00,100%0,100%计算(100%*var(--_i,0)),计算(100%-50%*var(--_i,0))计算(120%*var(--_i,0)));}。gallery>img:hover{--_i:1;}在这里，像往常一样，我使用一个变量来优化代码。该变量将在0和1之间切换以更新多边形。案例4多图拼接效果这是一种将各种图像组合成不同形状的艺术风格。我们今天使用的CSS完全可以实现这种效果！根据上面的效果图，我们来分析一下每张图片的位置和大小。我们需要决定网格需要多少列和多少行：我们有两个并排放置的大图像，每个图像占网格宽度和整个网格高度的一半。这意味着可能需要两列和一行。中间的图像与其他两个图像重叠。这意味着我们需要四列和一行。最后两张图片各占一半网格，就像前两张图片一样。但它们只有网格高度的一半。我们可以使用现有的列，但我们需要两行。这只是我的理解方式。相信还有其他的配置也可以得到相同的布局，有兴趣的同学可以自己动手实现。基于我们上面定义的网格，然后把图片放在对应的网格上：.gallery{display:grid;网格：重复（2、1fr）/重复（4、1fr）；宽高比：2;}。galleryimg:nth-child(1){grid-area:1/1/span2/span2;}.??galleryimg:nth-child(2){grid-area:1/2/span2/span2;}.galleryimg:nth-child(3){grid-area:span2/span2/-1/-1;}.galleryimg:nth-child(4){grid-area:2/1/span1/span2;}.??galleryimg:nth-child(5){grid-area:span1/span2/-1/-1;}看到这个我相信你已经找到了我们使用相同方法的例子。我们定义一个网格并将图像明确地放置在网格上，使用网格区域使图像重叠。最后裁剪掉重叠部分，达到最终目的。接下来是裁剪部分，我们一共有四个三角形和一个菱形。完整代码：.galleryimg:nth-child(1){grid-area:1/1/span2/span2;clip-path:polygon(00,100%0,0100%);}.galleryimg:nth-child(2){grid-area:1/2/span2/span2;clip-path:polygon(50%0,100%50%,50%100%,050%);}.galleryimg:nth-child(3){网格区域：span2/span2/-1/-1;clip-path:polygon(00,100%0,100%100%);}.galleryimg:nth-child(4){grid-area:2/1/span1/span2;clip-path:polygon(50%0,100%100%,0100%);}.galleryimg:nth-child(5){网格区域：span1/span2/-1/-1;clip-path:polygon(50%0,100%100%,0100%);}基于这个效果可以导出更复杂的多图布局效果，没有上面的对称效果。实现起来相对复杂。不过核心的实现过程是一样的，整体可以按照下面的网格布局来安排。有兴趣的同学可以自己实现。总结在整个系列中，我们探索了许多不同类型的图像网格，从基本的东西到我们今天制作的复杂的马多图镶嵌。CSS裁剪有很多实践经验，希望你能把这些经验用在你的项目中！代码整体上线效果：https://code.juejin.cn/pen/71...如果您看完本文觉得有用，记得点赞支持。说不定哪天会用到呢~专注前端开发，分享前端相关技术干货，公众号：南城大学前端（ID：nanchengfe）