Beispielcode für CSS zum Erzielen eines Bildzoomeffekts und eines langsamen Übergangseffekts beim Bewegen der Maus
|
Quellcode: <!DOCTYPE html>
<html>
<Kopf>
<meta charset="utf-8">
<title>CSS, um einen Zoomeffekt zu erzielen, wenn die Maus bewegt wird</title>
<style type="text/css">
div{
Breite: 200px;
Höhe: 300px;
Rand: 0 automatisch;
Rand oben: 100px;
}
div img{
Breite: 100 %;
Höhe: 100%;
Übergang: alle 0,6 s; //Stellen Sie die Ausführungszeit der Animation auf 0,6 s ein
Cursor: Zeiger;
}
div img:hover{
transform: scale(1.2); //Stellt das Bild entsprechend dem Verhältnis auf das 1,2-fache vergrößerte Bild ein }
</Stil>
</Kopf>
<Text>
<div>
<img src="bilder/unbenannt.jpg">
</div>
</body>
</html>- Maske, wenn das Bild über das Div hinausläuft:
Quellcode: <!DOCTYPE html>
<html>
<Kopf>
<meta charset="utf-8">
<title>CSS, um einen Zoomeffekt zu erzielen, wenn die Maus bewegt wird</title>
<style type="text/css">
div{
Breite: 200px;
Höhe: 300px;
Rand: 0 automatisch;
Rand oben: 100px;
overflow: hidden; //Das Bild wird ausgeblendet, wenn es das div überschreitet }
div img{
Breite: 100 %;
Höhe: 100%;
Übergang: alle 0,6 s; //Stellen Sie die Ausführungszeit der Animation auf 0,6 s ein
Cursor: Zeiger;
}
div img:hover{
transform: scale(1.3); //Stellt das Bild entsprechend dem Verhältnis auf das 1,3-fache vergrößerte Bild ein }
</Stil>
</Kopf>
<Text>
<div>
<img src="bilder/unbenannt.jpg">
</div>
</body>
</html>Damit ist dieser Artikel über die Verwendung von CSS zum Erzielen von Bildzooms und langsamen Übergangseffekten beim Bewegen der Maus über das Bild abgeschlossen. Weitere Informationen zum CSS-Bildzoomen beim Bewegen der Maus über das Bild finden Sie in früheren Artikeln auf 123WORDPRESS.COM oder in den verwandten Artikeln weiter unten. Wir hoffen, dass Sie 123WORDPRESS.COM auch in Zukunft unterstützen werden! |
<<: Über nginx zur Implementierung des Jira-Reverse-Proxys
>>: Lösung für MySQL-Verbindungsausnahme und Fehler 10061
Artikel empfehlen
Informationen zur Docker-Sicherheit Probleme mit der Docker-TLS-verschlüsselten Kommunikation
Inhaltsverzeichnis 1. Sicherheitsprobleme mit Doc...
Detaillierte Erläuterung der für das Front-End erforderlichen Nginx-Konfiguration
Nginx (Engine x) ist ein leichter, leistungsstark...
So migrieren Sie das Datenverzeichnis in mysql8.0.20
Das Standardspeicherverzeichnis von MySQL ist /va...
Die einfachste Lösung für das Problem, dass Sublime Text in Ubuntu kein Chinesisch eingeben kann
Sublimieren Sublime Text ist ein Code-Editor (Sub...
Methode der Iframe-Anpassung im webresponsiven Layout
Problem <br />Bei responsivem Layout sollte...
So installieren Sie Git unter Linux
1. Einleitung Git ist ein kostenloses, verteiltes...
Beispiel zum Verlassen der Schleife in Array.forEach in js
Inhaltsverzeichnis forEach() Methode So springen ...
Die Funktionen und Unterschiede zwischen deaktiviert und schreibgeschützt
1: schreibgeschützt dient zum Sperren dieses Steue...
Grafisches Tutorial zur Maven-Installation und -Konfiguration unter Windows (einschließlich lokalisierter Warehouse-Konfiguration)
1. Maven herunterladen Offizielle Maven-Website: ...
VMware Workstation ist nicht mit Device/Credential Guard kompatibel
Beim Installieren einer virtuellen Maschine wird ...
So fahren Sie MySQL sicher herunter
Beim Herunterfahren des MySQL-Servers können, abh...
Datums- und Zeitkomponente des WeChat-Applets (Jahr, Monat, Tag, Stunde und Minute)
In diesem Artikelbeispiel wird der spezifische Co...
Zusammenfassung der SQL-Deduplizierungsmethoden
Wenn wir SQL zum Extrahieren von Daten verwenden,...
Detaillierte Erklärung der Tastaturereignisse von Vue
Inhaltsverzeichnis Allgemeine Schlüsselaliase Sch...
Praktische Hinweise zur Installation von Jenkins mit Docker-Compose
Erstellen Sie ein Verzeichnis cd /usr/local/docke...