Analyse der Prinzipien verschiedener Möglichkeiten zur Nachahmung des Lupeneffekts in CSS3

Warum lautet der Titel des Artikels „Imitierte Lupe“?
Denn das, worüber ich heute sprechen möchte, ist nicht das, was allgemein gesagt wird, nämlich dass, wenn die Maus sich bewegt, ein großes lokales Bild daneben erscheint. Das ist einfach zu schreiben und erfordert nicht viele Fähigkeiten (verwenden Sie relative Positionierung, um das übergeordnete Element (oder: das Originalbild) zu positionieren, und absolute Positionierung, um das lokale große Bild (Zweck: es irgendwo neben dem Originalbild zu platzieren) zu positionieren, verwenden Sie CSS, um den Stil daneben zu steuern, und verwenden Sie Mausereignisse, um zuzuhören ... Natürlich können Sie auch direkt die Schnittstelle in jQuery verwenden - $('class name').jqzoom({zoomwidth:xx; zoomheight: xx; zoomType:'reverse';}) Der letzte Typ definiert den Lupentyp)

Okay, kommen wir zurück zum Thema. Worüber ich heute sprechen möchte, ist die Animation der Vergrößerung des Bildes an seiner ursprünglichen Position, wenn die Maus hineinbewegt wird !
Genau: Animation. (Folgend: Ausschnitt aus einer Website)

Als erstes fiel mir das @keyframes-Attribut von CSS3 ein, da es häufiger verwendet wird.
Beispiel: Sie können „von...bis“ verwenden, um den Stil anzugeben – Eingangsanimation und Ausgangsanimation

Zum Beispiel: Sie können dies durch Übergang erreichen ( der heutige Schwerpunkt )

Prophet: CSS3-Attributtransformation – (Drehen: Drehen, Skalieren: Skalieren, Verzerren: Verzerren, Übersetzen: Übersetzen)

Zum Beispiel:
Die normale Breite des Elements beträgt 100 Pixel und die Breite wird 200 Pixel, wenn die Maus darüberfährt.
Wenn Sie nur den Breitenwert festlegen, ist der Effekt wie folgt:

Sieht es nicht sehr steif aus? Schauen wir uns die Wirkung des Hinzufügens eines Übergangs an:

Nachdem Sie sich den Unterschied zwischen den beiden Effekten angesehen haben, verstehen Sie wahrscheinlich die Rolle des Übergangsattributs. Das Ziel dieses Beispiels ist ähnlich wie bei der Breitenänderung, der endgültige Effekt ist jedoch anders. Bitte schauen Sie sich weiterhin den detaillierten Code unten an:

<div id="Behälter">
  <img src="./kleiner_junge.jpg" />
  <span>Hallo zusammen! Wer bin ich? </span>
</div>

#Behälter {
  Rand: 200px;
  Position: relativ;
  Breite: 300px;
  Höhe: 300px;
  Hintergrundfarbe: grüngelb;
  Übergang: Transformation, 0,5 s Ausklang;
}

#Containerbild {
  Breite: 100 %;
  Höhe: 100%;
}

#Containerspanne {
  Position: absolut;
  oben: 0;
  links: 0;
  Rand: 6px;
  Breite: 100 %;
  Höhe: 20px;
  Zeilenhöhe: 20px;
  Schriftgröße: 18px;
  Farbe: weiß;
  Textausrichtung: zentriert;
}

#container:hover {
  transformieren: Skalierung (1,3);
}

Analyse:
(1) Fügen Sie dem Container die Pseudoklasse „Hover“ hinzu und legen Sie den Vergrößerungseffekt des Containers über das Attribut „Transform“ fest. (2) Legen Sie das Übergangsattribut des Containers fest, wobei der Attributwert „Transform“ und die Dauer der Animation lautet.

Damit ist dieser Artikel über die Prinzipien und Analysen verschiedener Möglichkeiten zur Simulation eines Lupeneffekts in CSS3 abgeschlossen. Weitere relevante CSS3-Lupeninhalte finden Sie in früheren Artikeln auf 123WORDPRESS.COM oder in den verwandten Artikeln weiter unten. Ich hoffe, Sie werden 123WORDPRESS.COM auch in Zukunft unterstützen!