這是僅使用<img alt="花式圖像裝飾：口罩和高級(jí)懸停效果" >>元素和CSS製作視覺(jué)上令人驚嘆的圖像裝飾的三部分系列的第2部分。 在第1部分的基礎(chǔ)上，我們將繼續(xù)探索梯度並引入mask屬性，以實(shí)現(xiàn)更複雜的效果和懸停動(dòng)畫(huà)。

花哨的圖像裝飾系列概述

• >單元魔術(shù)
• >面具和高級(jí)懸停效果（您在這裡！）
• 概述和復(fù)雜動(dòng)畫(huà)

讓我們進(jìn)入我們的第一個(gè)示例：

郵票郵票效果

>令人驚訝的是，此效果僅需要兩個(gè)梯度和一個(gè)過(guò)濾器：>

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));
}

填充為背景梯度創(chuàng)造空間。

和radial-gradient()的組合巧妙地切開(kāi)了圖像周圍的圓形部分。無(wú)論圖像尺寸如何 linear-gradient()圓形框架round

此示例使用

在圖像周圍創(chuàng)建圓圈

，使用

值來(lái)保持一致的尺寸。 幀和圖像之間的透明差距是使用radial-gradient()屬性實(shí)現(xiàn)的：> 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;
}

以揭示圖像和框架，掩蓋了它們之間的間隙。

內(nèi)部透明邊框mask conic-gradient()此技術(shù)創(chuàng)建了一個(gè)透明的邊框linear-gradient()內(nèi)部的內(nèi)部圖像，使用a

為內(nèi)部段，而a

為外部創(chuàng)造了間距，從而產(chǎn)生了透明的效果。 linear-gradient()多個(gè)梯度語(yǔ)法可以實(shí)現(xiàn)相似的結(jié)果；最佳方法優(yōu)先考慮簡(jiǎn)潔性和可維護(hù)性。 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;
}

> trick添加了懸停效果，以動(dòng)畫(huà)原本不可模擬的

屬性。

框架揭示動(dòng)畫(huà)font-size mask本節(jié)構(gòu)建在先前的示例上，將梯度從屬性移至

屬性，並為邊框添加

。 通過(guò)調(diào)整

或

。 background進(jìn)一步的示例展示了更複雜的多步動(dòng)畫(huà)，挑戰(zhàn)讀者分析和了解梯度和掩蔽相互作用。 mask結(jié)論repeating-linear-gradient() 該系列的這一部分mask-position展示了使用單個(gè)mask-size元素創(chuàng)建複雜的圖像裝飾和動(dòng)畫(huà)的梯度和屬性的功能。 第3部分將深入研究大綱和更複雜的動(dòng)畫(huà)。 提供了帶有損壞圖像效果的獎(jiǎng)勵(lì)演示。

花哨的圖像裝飾系列概述

• >單元魔術(shù)
• >面具和高級(jí)懸停效果（您在這裡?。?/li>
• 概述和復(fù)雜動(dòng)畫(huà)

以上是花式圖像裝飾：口罩和高級(jí)懸停效果的詳細(xì)內(nèi)容。更多資訊請(qǐng)關(guān)注PHP中文網(wǎng)其他相關(guān)文章！