>本文继续探索使用CSS网格，剪切和掩蔽技术创建视觉引人注目的图像画廊。 在先前的分期付款的基础上，我们将深入研究更复杂的形状设计。 和以前一样，重点仍然放在以最小的html。
> CSS网格和自定义形状系列recap
>
先前的文章阅读：虽然并非严格必要，但强烈建议您掌握所有技术。 但是，每篇文章都可以独立理解。>
让我们从第一个示例开始。
>
模切摄影库
html保持简单：
1 2 3 | <div class="gallery">
<img src="/static/imghw/default1.png" data-src="https://img.php.cn/" class="lazy" alt="CSS Grid and Custom Shapes, Part 3 "><img src="/static/imghw/default1.png" data-src="https://img.php.cn/" class="lazy" alt="CSS Grid and Custom Shapes, Part 3 "><img src="/static/imghw/default1.png" data-src="https://img.php.cn/" class="lazy" alt="CSS Grid and Custom Shapes, Part 3 "><img src="/static/imghw/default1.png" data-src="https://img.php.cn/" class="lazy" alt="CSS Grid and Custom Shapes, Part 3 ">
</div>
|
登录后复制
>核心挑战是利用CSS创建视觉设计。 CSS使用带有三列的方格网格，从战略上定位图像来创建重叠：
>
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 | .gallery {
--g: 6px;
display: grid;
width: 450px;
aspect-ratio: 1;
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拆分图像揭示
1 2 3 4 5 6 7 8 | .gallery img:nth-child(2) {
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) {
clip-path: polygon(0 0, calc(50% - var(--g) / 4) 0, 100% calc(50% + var(--g) / 4), 100% 100%, 0 100%);
}
|
登录后复制
动画创造了揭示效果。 定义了三个状态：没有悬停，在第一个图像上悬停，而在第二张图像上徘徊。 使用三点多边形，利用“溢出”形状的概念来简化CSS。 应用过渡以平滑地对悬停的变化进行平滑动画。pie图像揭示
1 2 3 4 5 6 7 8 | .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中文网其他相关文章！
