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)?
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="/static/imghw/default1.png" data-src="123123.png" class="lazy" / 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!
Heiße KI -Werkzeuge
Undresser.AI Undress
KI-gestützte App zum Erstellen realistischer Aktfotos
AI Clothes Remover
Online-KI-Tool zum Entfernen von Kleidung aus Fotos.
Undress AI Tool
Ausziehbilder kostenlos
Clothoff.io
KI-Kleiderentferner
AI Hentai Generator
Erstellen Sie kostenlos Ai Hentai.
Heißer Artikel
Heiße Werkzeuge
Notepad++7.3.1
Einfach zu bedienender und kostenloser Code-Editor
SublimeText3 chinesische Version
Chinesische Version, sehr einfach zu bedienen
Senden Sie Studio 13.0.1
Leistungsstarke integrierte PHP-Entwicklungsumgebung
Dreamweaver CS6
Visuelle Webentwicklungstools
SublimeText3 Mac-Version
Codebearbeitungssoftware auf Gottesniveau (SublimeText3)
Heiße Themen
1386
52
Wie erzielt man mit reinem CSS3 einen Welleneffekt? (Codebeispiel)
Jun 28, 2022 pm 01:39 PM
Wie erzielt man mit reinem CSS3 einen Welleneffekt? In diesem Artikel erfahren Sie, wie Sie mit SVG- und CSS-Animationen Welleneffekte erstellen.
Verwenden Sie CSS geschickt, um verschiedene seltsam geformte Schaltflächen zu realisieren (mit Code).
Jul 19, 2022 am 11:28 AM
Dieser Artikel zeigt Ihnen, wie Sie mithilfe von CSS auf einfache Weise verschiedene seltsam geformte Schaltflächen realisieren können, die häufig vorkommen. Ich hoffe, dass er Ihnen hilfreich sein wird!
So verstecken Sie Elemente in CSS, ohne Platz zu beanspruchen
Jun 01, 2022 pm 07:15 PM
Zwei Methoden: 1. Fügen Sie mit dem Anzeigeattribut einfach den Stil „display:none;“ zum Element hinzu. 2. Verwenden Sie die Attribute „position“ und „top“, um die absolute Positionierung des Elements festzulegen, um das Element auszublenden. Fügen Sie dem Element einfach den Stil „position:absolute;top:-9999px;“ hinzu.
So implementieren Sie Spitzenränder in CSS3
Sep 16, 2022 pm 07:11 PM
In CSS können Sie das Attribut „border-image“ verwenden, um einen Spitzenrand zu erzielen. Das Attribut „border-image“ kann Bilder zum Erstellen von Rändern verwenden, d. h. zum Hinzufügen eines Hintergrundbilds zum Rand. Sie müssen lediglich das Hintergrundbild als Spitzenstil angeben Bildrandbreite nach innen. Ob der Anfang wiederholt wird;".
Es zeigt sich, dass Textkarussell und Bildkarussell auch mit reinem CSS realisierbar sind!
Jun 10, 2022 pm 01:00 PM
Wie erstelle ich ein Textkarussell und ein Bildkarussell? Das erste, woran jeder denkt, ist die Verwendung von js. Tatsächlich können Textkarussell und Bildkarussell auch einen Blick auf die Implementierungsmethode werfen.
So vergrößern Sie das Bild durch Klicken mit der Maus in CSS3
Apr 25, 2022 pm 04:52 PM
Implementierungsmethode: 1. Verwenden Sie den Selektor „:active“, um den Status des Mausklicks auf das Bild auszuwählen. 2. Verwenden Sie das Transformationsattribut und die Funktion „scale()“, um den Bildvergrößerungseffekt zu erzielen. Die Syntax „img:active {transform : Skala(x-Achsen-Vergrößerung, y-Achsen-Vergrößerung);}".
Wie implementiert man mit JavaScript einen Mouseover-Vergrößerungseffekt auf Bildern?
Oct 20, 2023 am 09:16 AM
Wie implementiert man mit JavaScript einen Mouseover-Vergrößerungseffekt auf Bildern? Das heutige Webdesign legt immer mehr Wert auf die Benutzererfahrung und viele Webseiten fügen Bildern einige Spezialeffekte hinzu. Unter diesen ist der Bild-Mouse-Over-Vergrößerungseffekt ein häufiger Spezialeffekt, der das Bild automatisch vergrößern kann, wenn der Benutzer mit der Maus darüber fährt, wodurch die Interaktion zwischen dem Benutzer und dem Bild erhöht wird. In diesem Artikel wird erläutert, wie Sie mit JavaScript diesen Effekt erzielen, und es werden konkrete Codebeispiele aufgeführt. Ideenanalyse: Um den Mouseover-Vergrößerungseffekt von Bildern zu erzielen, können wir JavaS verwenden
So legen Sie die Rotationsgeschwindigkeit der Animation in CSS3 fest
Apr 28, 2022 pm 04:32 PM
In CSS3 können Sie das Attribut „animation-timing-function“ verwenden, um die Rotationsgeschwindigkeit der Animation festzulegen. Dieses Attribut wird verwendet, um anzugeben, wie die Animation einen Zyklus abschließt und die Geschwindigkeitskurve der Animation festlegt. Animation-Timing-Funktion: Geschwindigkeitsattributwert;}".
