Heim >tägliche Programmierung >CSS-Kenntnisse >Wie erreicht man den langsamen Vergrößerungseffekt von Bildern, wenn man in CSS3 mit der Maus darüber fährt (Bild, Text + Video)?
Wie erreicht man den langsamen Vergrößerungseffekt von Bildern, wenn man in CSS3 mit der Maus darüber fährt (Bild, Text + Video)?
- 藏色散人Original
- 2018-10-12 13:44:3414021Durchsuche
Dieser Artikel stellt Ihnen hauptsächlich die spezifische Methode vor, mit der Sie den Vergrößerungseffekt erzielen, wenn die Maus über das Bild gleitet.
Wenn wir große E-Commerce-Websites durchsuchen, dürfte der häufigste dynamische Effekt von Bildern der Vergrößerungseffekt sein, wenn die Maus in das Bild hineinfährt oder mit der Maus darüber fährt. Der Hauptzweck der Erzielung solcher dynamischer Effekte besteht darin, Produktinhalte hervorzuheben und das Benutzererlebnis zu verbessern.
Für Code-Neulinge ist dieser Effekt sicherlich sehr attraktiv, aber wenn Sie ihn über HTML/CSS-Code erreichen möchten, wissen Sie möglicherweise nicht, wo Sie anfangen sollen.
Tatsächlich ist die Codeimplementierung sehr einfach. Im Folgenden stellen wir Ihnen anhand eines einfachen Beispiels vor, wie Sie das Bild vergrößern, wenn Sie mit der Maus darüber fahren.
Das HTML/CSS-Codebeispiel für den Bildvergrößerungseffekt beim Bewegen der Maus lautet wie folgt:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>html/Css3实现图片缩放</title>
<style type="text/css">
#div1{
width: 500px;
margin: 150px auto;
}
#div1 img{
transition: all 0.5s;
border-radius:5px;
border: #eee solid 2px;
}
#div1 img:hover{
transform: scale(1.5);
}
</style>
</head>
<body style="background: #000">
<div id="div1">
<img src="123123.png" / alt="Wie erreicht man den langsamen Vergrößerungseffekt von Bildern, wenn man in CSS3 mit der Maus darüber fährt (Bild, Text + Video)?" >
</div>
</body>
</html>Besuchen Sie zuerst die Rezeption, und der Bildeffekt ist wie unten gezeigt:
Wenn wir dann mit der Maus über das Bild fahren, ist der Effekt wie folgt:
Auf dem Bild ist deutlich zu erkennen, dass das Bild vergrößert wurde.
Sie können diesen Code direkt kopieren und lokal testen. Einige der wichtigsten hier verwendeten CSS/CSS3-Eigenschaften sind:
border-radius: to div Fügen Sie dem Element einen abgerundeten Rand hinzu. Der Selektor
:hover wird verwendet, um das Element auszuwählen, auf dem der Mauszeiger schwebt.
transformieren : Wendet eine 2D- oder 3D-Transformation auf das Element an. Mit dieser Eigenschaft können wir das Element drehen, skalieren, verschieben oder neigen. wobei die Werteskala (x, y) Definieren Sie die 2D-Skalierungstransformation. (In diesem Beispiel wird der Bildzoom auf das 1,5-fache eingestellt)
Übergang: ein Kurzattribut, das zum Festlegen von vier Übergangsattributen verwendet wird. (In diesem Beispiel wird die Übergangszeit beim Vergrößern des Bildes auf 0,5 Sekunden festgelegt, um zu vermeiden, dass der Effekt zu abrupt ist.)
In diesem Artikel geht es um die Verwendung von HTML/CSS/CSS3, um den Effekt der Bildvergrößerung bei gedrückter Maus zu erzielen geht darüber hinweg. Sehr einfach und leicht zu verstehen, ich hoffe, es wird Freunden in Not helfen!
Wenn Sie mehr über HTML/CSS erfahren möchten, können Sie der chinesischen PHP-Website HTML-Video-Tutorial und CSS-Video-Tutorial, CSS3-Video-Tutorial folgen , willkommen alle zum Nachschlagen und Lernen!
Das obige ist der detaillierte Inhalt vonWie erreicht man den langsamen Vergrößerungseffekt von Bildern, wenn man in CSS3 mit der Maus darüber fährt (Bild, Text + Video)?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!