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="/static/imghw/default1.png" data-src="https://img.php.cn/upload/article/000/000/000/173906107393958.jpg" class="lazy" alt="How to Add a CSS Reveal Animation to Your Images ">

核心要點(diǎn)：

• 僅需<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.

img {
  --s: 200px; /* 圖片大小 */

  width: var(--s);
  height: var(--s);
  box-sizing: border-box;
}

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:

img {
  --s: 200px; /* 圖片大小 */

  width: var(--s);
  height: var(--s);
  box-sizing: border-box;
}

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!