Décorations d'image de fantaisie: masques et effets avancés de survol avancé

Il s'agit de la partie 2 d'une série en trois parties sur l'élaboration de décorations d'image visuellement époustouflantes en utilisant uniquement l'élément <img alt="Décorations d'image de fantaisie: masques et effets avancés de survol avancé" > et CSS. En s'appuyant sur la partie 1, nous continuerons à explorer les gradients et à présenter la propriété mask pour obtenir des effets plus complexes et des animations en survol.

Présentation de la série de décorations d'images fantaisie

• Magic à élément unique
• masques et effets de volants avancés (vous êtes ici!)
• COMPRIGMENTS ET ANIMATIONS COMPLEXE

Plongeons dans notre premier exemple:

L'effet du timbre des frais de port

Étonnamment, cet effet ne nécessite que deux gradients et un filtre:

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

Le rembourrage crée un espace pour les gradients de fond. La combinaison de radial-gradient() et linear-gradient() coupe intelligemment des sections circulaires autour de l'image. La valeur round assure un alignement parfait quelles que soient les dimensions de l'image.

le cadre arrondi

Cet exemple utilise un radial-gradient() pour créer des cercles autour de l'image, en utilisant la valeur round pour le dimensionnement cohérent. L'écart transparent entre le cadre et l'image est obtenu en utilisant la propriété 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;
}

le mask combine conic-gradient() et linear-gradient() pour révéler l'image et le cadre, masquant l'écart entre eux.

La bordure transparente intérieure

Cette technique crée une bordure transparente à l'intérieur L'image en utilisant un linear-gradient() pour la section intérieure et un conic-gradient() pour l'extérieur, l'espacement créant l'effet transparent.

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

Les syntaxes de gradient multiple peuvent obtenir des résultats similaires; La meilleure approche priorise la concision et la maintenabilité.

Un effet de survol est ajouté en utilisant une astuce font-size pour animer les propriétés mask autrement non d'animation.

Le cadre révèle l'animation

Cette section s'appuie sur des exemples précédents, déplaçant des gradients de la propriété background à la propriété mask et ajoutant un repeating-linear-gradient() pour la bordure. Un effet de survol est obtenu en ajustant mask-position ou mask-size.

D'autres exemples démontrent des animations en plusieurs étapes plus complexes, mettant le lecteur au défi d'analyser et de comprendre les interactions de gradient et de masque.

Conclusion

Cette partie de la série présente la puissance des gradients et la propriété mask pour créer des décorations et des animations sophistiquées à l'aide d'un seul élément <img alt="Décorations d'image de fantaisie: masques et effets avancés de survol avancé" >. La partie 3 se plongera dans les contours et les animations plus complexes. Une démo bonus avec un effet d'image cassé est fournie.

Présentation de la série de décorations d'images fantaisie

• Magic à élément unique
• masques et effets de volants avancés (vous êtes ici!)
• COMPRIGMENTS ET ANIMATIONS COMPLEXE

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!