CSS网格和自定义形状，第3部分

>本文继续探索使用CSS网格，剪切和掩蔽技术创建视觉引人注目的图像画廊。 在先前的分期付款的基础上，我们将深入研究更复杂的形状设计。 和以前一样，重点仍然放在以最小的html。

> CSS网格和自定义形状系列recap

第1部分
第2部分
第3部分（当前文章）
• >

>

先前的文章阅读：虽然并非严格必要，但强烈建议您掌握所有技术。 但是，每篇文章都可以独立理解。>

让我们从第一个示例开始。

>

模切摄影库

html保持简单：

<div class="gallery">
  <img src="/static/imghwm/default1.png" data-src="https://img.php.cn/" class="lazy" alt="CSS Grid and Custom Shapes, Part 3 "><img src="/static/imghwm/default1.png" data-src="https://img.php.cn/" class="lazy" alt="CSS Grid and Custom Shapes, Part 3 "><img src="/static/imghwm/default1.png" data-src="https://img.php.cn/" class="lazy" alt="CSS Grid and Custom Shapes, Part 3 "><img src="/static/imghwm/default1.png" data-src="https://img.php.cn/" class="lazy" alt="CSS Grid and Custom Shapes, Part 3 ">
</div>

>核心挑战是利用CSS创建视觉设计。 CSS使用带有三列的方格网格，从战略上定位图像来创建重叠：>

.gallery {
  --g: 6px; /* Gap between images */

  display: grid;
  width: 450px;
  aspect-ratio: 1; /* Square grid */
  grid: auto-flow 1fr / repeat(3, 1fr);
  gap: var(--g);
}
.gallery img:nth-child(2) {
  grid-area: 1 / 2 / span 2 / span 2;
}
.gallery img:nth-child(3) {
  grid-area: 2 / 1 / span 2 / span 2;
}

速记属性有效地定义了网格布局。 第二和第三张图像是明确定位的，使其他图像可以自动放置。 然后，用于对重叠的图像创建模切效应：>

grid灰度悬停效应增强了视觉吸引力。 clip-path拆分图像揭示

.gallery img:nth-child(2) {
  /* ... other styles ... */
  clip-path: polygon(0 0, 100% 0, 100% 100%, calc(50% + var(--g) / 4) 100%, 0 calc(50% - var(--g) / 4));
}
.gallery img:nth-child(3) {
  /* ... other styles ... */
  clip-path: polygon(0 0, calc(50% - var(--g) / 4) 0, 100% calc(50% + var(--g) / 4), 100% 100%, 0 100%);
}

这个示例演示了图像揭示对悬停的影响。 使用了两个重叠的图像：

动画创造了揭示效果。 定义了三个状态：没有悬停，在第一个图像上悬停，而在第二张图像上徘徊。

使用三点多边形，利用“溢出”形状的概念来简化CSS。 应用过渡以平滑地对悬停的变化进行平滑动画。pie图像揭示

.gallery {
  display: grid;
}
.gallery > img {
  grid-area: 1 / 1;
  width: 350px;
  aspect-ratio: 1;
}

这个示例将揭示效果扩展到在类似派的布局中排列的四个图像。 动画产生了四分之一圆的幻觉，呈悬停在整个圆圈中。 效果是通过精心制作的七点多边形和快速动画来实现的。 图像的马赛克clip-path clip-path>本节探索从多个重叠图像中创建镶嵌效应。 通过分析图像布置，仔细确定网格布局，从而产生2x4网格。 clip-path用于塑造单个图像以适合镶嵌物。

图像的复杂镶嵌

这个最后的例子展示了一个更复杂，不对称的镶嵌物。 确定网格布局和clip-path>值的过程详细介绍了一种系统的创建复杂设计的方法。 采用优化技术来减少声明的数量。

>

结论

该系列展示了CSS网格的功能和clip-path用于创建使用最小HTML的复杂图像库布局的功能。 这些示例展示了各种技术和方法，鼓励读者尝试并创建自己的独特设计。 这篇文章的结论是读者使用所学技术创建自己的马赛克的挑战。

以上是CSS网格和自定义形状，第3部分的详细内容。更多信息请关注PHP中文网其他相关文章！