So fügen Sie Ihren Bildern eine CSS -Animation hinzu

Verwenden Sie CSS geschickt, um eine Image -Schwebe zu erzielen und Animationseffekte ohne zusätzliche Elemente zu enthüllen! In diesem Artikel wird eingehend untersucht CSS enthüllen Animation zu Ihren Bildern " /> <img src="https://img.php.cn/upload/article/000/000/000/173906107393958.jpg" alt="How to Add a CSS Reveal Animation to Your Images ">

核心要点：

• 仅需<img alt="So fügen Sie Ihren Bildern eine CSS -Animation hinzu" >
• Kernpunkte: object-fit: cover object-position: right
Es werden nur
• Elemente benötigt, um CSS-Animationen ohne zusätzliche Elemente oder Pseudoelemente zu implementieren. object-fit: none
Der Schlüssel zur Animation lautet: Fügen Sie dem Bild das Polieren hinzu und reduzieren Sie es dann beim Schweben allmählich auf Null, während Sie Hintergrundfarben verwenden, um den visuellen Effekt des enthüllten Bildes zu erzeugen. Die Eigenschaften

und

werden verwendet, um das Seitenverhältnis des Bildes aufrechtzuerhalten und zu verhindern, dass sich das Bild während der Animation bewegt. <img alt="So fügen Sie Ihren Bildern eine CSS -Animation hinzu" > Durch Anpassen der Polsterrichtung können Sie den Animationseffekt erweitern und mehr Änderungen erstellen. Eigenschaften können in einigen Konfigurationen auch unterschiedliche Effekte erzielen, erfordern jedoch die CSS -Breite und -höhe, um den inhärenten Abmessungen des Bildes zu entsprechen.

In diesem Artikel wird einige CSS -Tipps untersucht, mit denen Sie beeindruckende Bild -Schweber -Animationen erstellen können. Sie denken vielleicht: "Es ist einfach! Fügen Sie einfach ein zusätzliches Element über dem Bild hinzu." Dies mag unglaublich klingen, da nur Bildelemente verwendet werden, so scheint es, dass nichts darüber hinzugefügt werden kann. In der Tat fügen wir nichts über dem Bild hinzu, aber wir simulieren diesen Effekt intelligent! Hier ist eine Codepen -Demo, die zeigt, was wir gemeinsam untersuchen werden:

Codepen -Demo -Link

Ist es nicht cool? Das Enthüllen von Animationen kann mit nur wenigen Codezeilen erreicht werden, keine zusätzlichen Elemente erforderlich. Lassen Sie uns in das Geheimnis dahinter eintauchen.

<code class="language-css">img {
  --s: 200px; /* 图片大小 */

  width: var(--s);
  height: var(--s);
  box-sizing: border-box;
}</code>

Erste Konfiguration:

width height Definieren Sie zuerst die Bildgröße: aspect-ratio box-sizing: border-box

Bisher ist der Code sehr einfach. Der Einfachheit halber verwenden wir quadratische Bilder, können aber auch Bilder jeder Größe verwenden. Es ist sehr wichtig, die Standardgröße des Bildes explizit

und zu verwenden, nicht zu verwenden. Dies ist ein Muss für unsere Animation und wir werden später erklären, warum. Es ist auch sehr wichtig, auf die Verwendung von zu achten. Es hat momentan keine Wirkung, aber lassen Sie uns zum nächsten Schritt übergehen und sehen, warum es benötigt wird.

box-sizing: border-box Fügen Sie die Polsterung hinzu:

Was passiert, wenn wir einem Bild, das eine feste Größe definiert hat und einstößt, etwas Polster hinzufügen? Probieren wir es aus! Codepen Demo Link

Wie wir in der Demo oben gesehen haben, wurde das Bild gepresst. Wir haben links 100px -Polster hinzugefügt, wodurch nur 100px Platz für das Bild (Inhaltsbereich) bleiben. Dies ist die Wirkung von box-sizing: border-box. Wie MDN erklärt: border-box fordert den Browser an, alle Grenzen und Polsterung in den Werten zu berücksichtigen, die Sie für die Breite und Höhe des Elements angeben. Wenn Sie die Breite des Elements auf 100 Pixel einstellen, enthält 100 Pixel alle Grenzen oder Füllen, die Sie hinzugefügt haben, und das Inhaltsfeld schrumpft, um die zusätzliche Breite zu absorbieren.

Stellen Sie sich jetzt eine Szene vor, in der die Polsterung gleich Breite ist. Ja, das Bild wird verschwinden! Schweben Sie in der folgenden Demo über das Bild, um die Ergebnisse anzuzeigen. Codepen Demo Link

In der obigen Demonstration müssen zwei Punkte geachtet werden. Die Polsterung kann animiert werden, was cool ist, und wir können auch die Bedeutung der CSS -Variablen sehen, die früher beim Definieren der Bildgröße verwendet werden. Wir haben dieselbe Variable verwendet, um die Polsterung zu definieren, sodass wir nicht den gleichen Wert wiederholen müssen.

Hintergrundfarbe hinzufügen:

Nehmen wir das vorherige Beispiel und fügen Sie den Hintergrund hinzu. Codepen Demo Link

Wir beginnen unserem Ziel näher zu kommen. Der Hintergrund wird logischerweise das gesamte Element abdecken. Wir können es unter dem Bild nicht sehen (es sei denn, wir verwenden transparente Bilder), aber wir können es im Füllbereich sehen. Unser Ziel ist es, das Bild zu enthüllen. Beginnen wir also zunächst die Polsterung und setzen Sie es dann auf 0, wenn wir schweben - das Gegenteil von dem, was wir derzeit tun. Codepen Demo Link

Dies ist immer noch nicht der Effekt, den wir wollen, aber wir kommen immer näher! Wir brauchen nur eine Zutat, um unsere „falsche“ Enthüllung der Animation perfekt zu machen!

Objektfit und Objektposition hinzufügen:

Der fehlende Teil besteht darin, zu vermeiden, dass das Bild gepresst wird, und hier ist der letzte Trick. Wir werden die Werte object-fit und cover verwenden. Wie MDN erläutert: Ersetzen Sie den Inhalt ersetzt sich, um das Seitenverhältnis beizubehalten und gleichzeitig das gesamte Inhaltsfeld des Elements zu füllen. Wenn das Seitenverhältnis eines Objekts nicht mit dem Seitenverhältnis seiner Box übereinstimmt, wird das Objekt so zugeschnitten.

Es gibt hier zwei wichtige Punkte:

• "Ersetzen Sie den Inhalt ersetzen Sie die Größenordnung, um das Seitenverhältnis aufrechtzuerhalten". Dies bedeutet, dass das Bild nicht gepresst wird, sondern seine inhärenten Proportionen beibehält. Wir verwenden ein quadratisches Bild, sodass es das Quadrat hält.
• "Füllen Sie das gesamte Inhaltsfeld des Elements ... wird zu Anpassung geschnitten". Das Bild sollte alle Inhaltsbereiche füllen (den Bereich, den wir durch Hinzufügen von Füllung reduzieren), aber wenn es nicht innen passt, werden wir es zubereiten.

Probieren wir es in der Demo unten aus. Codepen Demo Link

Hast du es gesehen? Die Bilder werden nicht mehr gepresst! Es behält seine Anteile innerhalb des Inhaltsbereichs bei, während wir die Polsterung hinzufügen/entfernen. Ok, wir könnten denken, dass sich der Effekt von der ersten Präsentation unterscheidet. Das Bild bewegt sich seltsam. Das stimmt. Jetzt wenden wir uns an object-position. Der Standardwert lautet center, daher befindet sich das Bild immer in der Mitte des Inhaltsbereichs und wird so zugeschnitten, dass sie innen passen. Deshalb bewegt es sich mit der Animation. Was wir als nächstes tun müssen, sollte leicht vorherzusagen sein. Wir werden den Ort ändern, um sicherzustellen, dass sich das Bild nicht bewegt. Wir werden von links Polsterung hinzufügen, daher sollten wir object-position: right die Position des Bildes nach rechts verwenden. Codepen Demo Link

unsere Enthüllung Animation ist abgeschlossen! Wir brauchen keine Überlagerungen oder zusätzliche Elemente über dem Bild. Durch die Verwendung einfacher Hintergrundfarben und einige Tipps zur Bildpositionierung haben wir schöne Enthüllung von Animationen mit einer kleinen Menge einfacher Code erreicht. Wir können die Richtung einfach aktualisieren, indem wir die Füllrichtung und object-position einstellen. Hier ist die erste Demonstration aus der vorherigen, die vier Richtungen enthält. Codepen Demo Link

Folgendes ist das CSS, das wir verwenden:

<code class="language-css">img {
  --s: 200px; /* 图片大小 */

  width: var(--s);
  height: var(--s);
  box-sizing: border-box;
}</code>

Weitere Animationen enthüllt:

Wir können dieselbe Idee verwenden, um den Trick zu erweitern, um mehr Änderungen zu erstellen. Anstatt die Polsterung von einer Seite hinzuzufügen/zu entfernen, können wir die Polsterung zu beiden Seiten oder sogar allen Seiten hinzufügen/entfernen. Codepen Demo Link

Wenn wir den oben gezeigten Code überprüfen, werden wir nicht feststellen, dass es einen großen Unterschied von der vorherigen gibt. Wir haben nur verschiedene Füllkonfigurationen eingerichtet, um mehr Variationen des gleichen Effekts zu erstellen. In den ersten und letzten Beispielen verwenden wir object-fit: none statt object-fit: cover, um einen Trick zu haben. In diesen Fällen reduziert die Füllung die Breite und Höhe des Inhaltsbereichs auf 0, während wir in allen anderen Fällen nur die Höhe oder Breite reduzieren. In dieser Konfiguration funktioniert cover nicht, aber none kann den Job machen. MDN -Hinweise: Der Ersatzinhalt wird nicht die Größe der Größe sein.

Warum verwenden wir nicht immer none? Wir können es benutzen und es funktioniert, aber es hat einen kleinen Nachteil. Die inhärenten Dimensionen des Bildes werden berücksichtigt, sodass wir die CSS -Breite und -höhe gleich den inhärenten Dimensionen für die Wirkung der Technik machen müssen. Auf der anderen Seite hält nur die Skala des Bildes und die Größe des Bildes, um die Kastengröße anzupassen, sodass wir jede CSS -Größe für das Bild sicher definieren können. Dies ist ein Vergleich, damit wir den Unterschied sehen können. none Codepen Demo Link cover

In beiden Fällen geben wir beide Animationen auf, aber wenn wir object-fit: none verwenden, ändert das Bild nicht und behält seine Standardgröße (500 x 500), was nicht gut ist. object-fit: cover Behalten Sie nur den Anteil beibehalten und das Bild wird geändert, um die Kastengröße anzupassen.

Schlussfolgerung:

Ich hoffe, Sie haben dieses kleine CSS -Experiment genossen. Mit einfachen Tricks und einigen Codezeilen haben wir eine coole Enthüllung von Animation mit nur dem <img alt="So fügen Sie Ihren Bildern eine CSS -Animation hinzu" > -Element implementiert. Wir haben auch viele Änderungen anhand der gleichen Codestruktur vorgenommen. Wir können mit dieser Technik mehr tun. Ich werde Ihnen ein letztes Beispiel lassen, in dem ich ein Schwarzweißbild in ein Farbbild umwandelte, während ich schwebte. Codepen Demo Link

Ich werde Sie weiter erkunden und versuchen, mehr schöne Animationen zu finden!

Das obige ist der detaillierte Inhalt vonSo fügen Sie Ihren Bildern eine CSS -Animation hinzu. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!