派手な画像の装飾：マスクと高度なホバーエフェクト-CSSチュートリアル-php.cn

派手な画像の装飾：マスクと高度なホバーエフェクト

William Shakespeare

リリース： 2025-03-10 09:35:08

オリジナル

368 人が閲覧しました

Fancy Image Decorations: Masks and Advanced Hover Effects

これは、<img alt="派手な画像の装飾：マスクと高度なホバーエフェクト" >要素とCSSのみを使用した視覚的に見事な画像装飾を作成する3部構成のシリーズのパート2です。パート1に基づいて、グラデーションの探索を続け、maskプロパティを導入して、より複雑なエフェクトとホバーアニメーションを実現します。

ファンシーイメージデコレーションシリーズの概要

最初の例に飛び込みましょう：

郵便切手効果

驚くべきことに、この効果には2つの勾配とフィルターのみが必要です。

パディングは、バックグラウンドグラデーションのスペースを作成します。

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 この例では、A

を使用して、画像の周りに円を作成し、一貫したサイジングのために

値を採用しています。フレームと画像の間の透明なギャップは、

プロパティを使用して達成されます。

radial-gradient()はroundとmaskを組み合わせて画像とフレームを明らかにし、それらの間のギャップをマスクします。

内側の透明な境界

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

ログイン後にコピー

この手法は、内側のセクションにa

を使用し、外側にamaskを使用して、透明な境界を作成し、透明な効果を作成します。 conic-gradient() linear-gradient()複数の勾配構文は同様の結果を達成できます。最良のアプローチは、簡潔さと保守性を優先します

ホバーエフェクトが

トリックを使用して追加されて、それ以外の場合は不変の不可能な

プロパティをアニメーション化します。

フレームはアニメーションを明らかにします このセクションは、以前の例に基づいて構築されており、グラデーションをプロパティから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プロパティの力を紹介します。パート3は、アウトラインとより複雑なアニメーションを掘り下げます。壊れた画像効果を備えたボーナスデモが提供されます。