這是僅使用<img alt="花式圖像裝飾：口罩和高級懸停效果" >>元素和CSS製作視覺上令人驚嘆的圖像裝飾的三部分系列的第2部分。 在第1部分的基礎上，我們將繼續探索梯度並引入mask屬性，以實現更複雜的效果和懸停動畫。
讓我們進入我們的第一個示例：
>令人驚訝的是，此效果僅需要兩個梯度和一個過濾器：
img {
--r: 10px; /* Circle radius */
padding: calc(2 * var(--r));
filter: grayscale(.4);
background:
radial-gradient(var(--r),#0000 98%,#fff) round
calc(-1.5 * var(--r)) calc(-1.5 * var(--r)) / calc(3 * var(--r)) calc(3 * var(--r)),
linear-gradient(#fff 0 0) no-repeat
50% / calc(100% - 3 * var(--r)) calc(100% - 3 * var(--r));
}和radial-gradient()的組合巧妙地切開了圖像周圍的圓形部分。無論圖像尺寸如何
linear-gradient()圓形框架round
值來保持一致的尺寸。 幀和圖像之間的透明差距是使用radial-gradient()屬性實現的：roundmask組合
img {
--s: 20px; /* Frame size */
--g: 10px; /* Gap size */
--c: #FA6900;
padding: calc(var(--g) + var(--s));
background:
radial-gradient(farthest-side, var(--c) 97%, #0000)
0 0 / calc(2 * var(--s)) calc(2 * var(--s)) round;
mask:
conic-gradient(from 90deg at calc(2 * var(--s)) calc(2 * var(--s)), #0000 25%, #000 0)
calc(-1 * var(--s)) calc(-1 * var(--s)),
linear-gradient(#000 0 0) content-box;
}內部透明邊框mask
conic-gradient()此技術創建了一個透明的邊框linear-gradient()內部的內部圖像，使用a
為外部創造了間距，從而產生了透明的效果。
linear-gradient()多個梯度語法可以實現相似的結果；最佳方法優先考慮簡潔性和可維護性。 conic-gradient()
img {
--b: 5px; /* Border thickness */
--d: 20px; /* Distance from edge */
--_g: calc(100% - 2 * (var(--d) + var(--b)));
mask:
conic-gradient(from 90deg at var(--d) var(--d), #0000 25%, #000 0)
0 0 / calc(100% - var(--d)) calc(100% - var(--d)),
linear-gradient(#000 0 0) 50% / var(--_g) var(--_g) no-repeat;
}屬性。
框架揭示動畫font-size
mask本節構建在先前的示例上，將梯度從
。
background進一步的示例展示了更複雜的多步動畫，挑戰讀者分析和了解梯度和掩蔽相互作用。
mask結論repeating-linear-gradient()
該系列的這一部分mask-position展示了使用單個mask-size元素創建複雜的圖像裝飾和動畫的梯度和屬性的功能。 第3部分將深入研究大綱和更複雜的動畫。 提供了帶有損壞圖像效果的獎勵演示。
以上是花式圖像裝飾：口罩和高級懸停效果的詳細內容。更多資訊請關注PHP中文網其他相關文章！
