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中文網其他相關文章！