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
So erstellen Sie einen Flammeneffekt mit CSS
Unten beginnt der Haupttext. 123WORDPRESS.COM Her...
Installations- und Konfigurationstutorial von MySQL 8.0.16 unter Win10
1. Entpacken Sie MySQL 8.0.16 Der Ordner dada und...
WeChat-Applet implementiert SMS-Login in Aktion
Inhaltsverzeichnis 1. Vorschau der Schnittstellen...
Vue implementiert die Frage-Antwort-Funktion
1. Schnittstelle für die Anforderung einer Antwor...
Grafisches Tutorial zur Installation von JDK1.8 unter CentOS7.4
Schritte zur Linux-Installation von JDK1.8 1. Übe...
Lösung für das Ausgehen der Auto-Increment-ID (Primärschlüssel) von MySQL
In MySQL werden viele Typen von Auto-Increment-ID...
Installation des MySQL 5.7.22-Binärpakets und installationsfreie Version – Windows-Konfigurationsmethode
Der folgende Code stellt die Installationsmethode...
Reines CSS zum Lösen des Decken- und Bodenabsaugens in den Implementierungsschritten des H5-Layouts
Welche Produkte möchten Sie erwähnen? Vor kurzem ...
Warum sollten Sie mit der add_header-Direktive von Nginx vorsichtig sein?
Vorwort Wie wir alle wissen, legt die Nginx-Konfi...
Detaillierte Erläuterung der Startreihenfolge des Docker-Containers mithilfe eines Shell-Skripts
1. Aufgetretene Probleme Bei der verteilten Proje...
Detaillierte Erläuterung des MySQL-Isolationsebenen-Operationsprozesses (cmd)
Beispielvorgang für nicht festgeschriebenes Lesen...
So lösen Sie das Problem unzureichender Berechtigungen beim Benutzerwechsel im Docker-Container
Beim Benutzerwechsel im Docker-Container kommt di...
So verwenden Sie Docker Compose zum Implementieren des Nginx-Lastausgleichs
Implementieren Sie den Nginx-Lastausgleich basier...
Tutorial zu HTML-Tabellen-Tags (12): Rahmenstil-Attribut FRAME
Verwenden Sie die FRAME-Eigenschaft, um den Stilt...