Ausgefallene Bilddekorationen: Masken und fortgeschrittene Schwebeffekte

Dies ist Teil 2 einer dreiteiligen Serie zum Erstellen visuell atemberaubender Bilddekorationen mit nur dem <img alt="Ausgefallene Bilddekorationen: Masken und fortgeschrittene Schwebeffekte" > Element und CSS. Auf Bauen von Teil 1 werden wir weiterhin Gradienten untersuchen und die mask -Spertion vorstellen, um kompliziertere Effekte und Schwebeanimationen zu erzielen.

Übersicht der Serie Serie für ausgefallene Bilddekorationen

• einzelne Elementmagie
• Masken und fortgeschrittene Schwebeffekte (Sie sind hier!)
• umrissen und komplexe Animationen

Lassen Sie uns in unser erstes Beispiel eintauchen:

Der Briefmarkeneffekt

überraschenderweise erfordert dieser Effekt nur zwei Gradienten und einen Filter:

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

Polsterung schafft Platz für die Hintergrundgradienten. Die Kombination von radial-gradient() und linear-gradient() schneidet clever kreisförmige Abschnitte um das Bild aus. Der Wert round sorgt für eine perfekte Ausrichtung unabhängig von den Bildabmessungen.

Der abgerundete Rahmen

Dieses Beispiel verwendet ein radial-gradient(), um Kreise um das Bild zu erstellen, wobei der Wert round für eine konsistente Größe verwendet wird. Die transparente Lücke zwischen Rahmen und Bild wird mit der Eigenschaft mask erreicht:

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

Das mask kombiniert conic-gradient() und linear-gradient(), um das Bild und den Rahmen anzuzeigen und die Lücke zwischen ihnen zu maskieren.

der innere transparente Rand

Diese Technik erzeugt einen transparenten Rand im Inneren Das Bild unter Verwendung eines linear-gradient() für den inneren Abschnitt und ein conic-gradient() für den Außenbereich, wobei der Abstand den transparenten Effekt erzeugt.

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

Mehrfachgradientensyntaxen können ähnliche Ergebnisse erzielen. Der beste Ansatz priorisiert SUKTIVE UND WAHRENBEITEL.

Ein Schwebeffekt wird unter Verwendung eines font-size Tricks hinzugefügt, um die ansonsten nicht animierten mask Eigenschaften zu animieren.

Der Bild enthüllt Animation

Dieser Abschnitt baut auf früheren Beispielen auf, bewegte Gradienten von der Eigenschaft background zur Eigenschaft mask und addiert ein repeating-linear-gradient() für die Grenze. Ein Schwebeffekt wird durch Anpassen von mask-position oder mask-size.

erreicht

Weitere Beispiele zeigen komplexere mehrstufige Animationen und fordern den Leser auf, die Gradienten- und Mask-Wechselwirkungen zu analysieren und zu verstehen.

Schlussfolgerung

Dieser Teil der Serie zeigt die Kraft der Gradienten und die mask Eigenschaft zum Erstellen hochentwickelter Bilddekorationen und -animationen unter Verwendung eines einzelnen <img alt="Ausgefallene Bilddekorationen: Masken und fortgeschrittene Schwebeffekte" > -Elements. Teil 3 wird sich mit Umrissen und komplexeren Animationen befassen. Eine Bonus -Demo mit einem kaputten Bildeffekt wird bereitgestellt.

Übersicht der Serie Serie für ausgefallene Bilddekorationen

• einzelne Elementmagie
• Masken und fortgeschrittene Schwebeffekte (Sie sind hier!)
• umrissen und komplexe Animationen

Das obige ist der detaillierte Inhalt vonAusgefallene Bilddekorationen: Masken und fortgeschrittene Schwebeffekte. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!