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 lösen Sie das Problem „Nginx 503-Dienst vorübergehend nicht verfügbar“
In letzter Zeit tritt nach dem Aktualisieren der ...
Eine kurze Analyse der Beispiele und Unterschiede bei der Verwendung von nohup und screen zum Ausführen von Hintergrundaufgaben in Linux
Die Verwendung eines SSH-Terminals (z. B. Putty, ...
Eine kurze Diskussion über einen effizienten Algorithmus zum Erstellen von Baumstrukturen in JavaScript
Inhaltsverzeichnis Einführung Ideen Erstellen ein...
Mehrere Grundsätze für die Produktdesign-Referenz auf Websites
In der folgenden Analyse geht es um Produktdesign...
Senden Sie das Image über den Container DockerCommit und pushen Sie das Image DockerPush
Nachdem Sie einen Container lokal erstellt haben,...
Zabbix überwacht Linux-Hosts basierend auf SNMP
Vorwort: Der Linux-Host ist relativ einfach zu ha...
Lösen Sie das Problem, dass die mit nginx erhaltene IP-Adresse 127.0.0.1 ist
Holen Sie sich das IP-Tool importiere lombok.exte...
mysql-8.0.17-winx64 Bereitstellungsmethode
1. Laden Sie mysql-8.0.17-winx64 von der offiziel...
Methode zum Erstellen eines privaten Docker-Warehouses basierend auf Harbor
Inhaltsverzeichnis 1. Einführung in Harbor 1. Har...
Detaillierte Erklärung der HTML-Elementhöhe, OffsetHeight, ClientHeight, ScrollTop usw.
Einige Attribute zu Elementen Bei der täglichen E...
MySQL-Datenbankoptimierung: Detaillierte Erläuterung der Sharding-Operationen für Tabellen und Datenbanken
Dieser Artikel veranschaulicht anhand von Beispie...
mysql-8.0.16 winx64 neuestes Installationstutorial mit Bildern und Text
Ich habe erst vor Kurzem angefangen, mich mit Dat...
Zusammenfassung zum Erlernen von HTML-Tags und Grundelementen
1. Elemente und Tags in HTML <br />Ein Elem...
Reines CSS3 zum Erstellen eines Beispielcodes für Seitenwechseleffekte
Das, was ich vorher geschrieben habe, ist zu komp...
jQuery implementiert Navigationsleisteneffekt mit Erweiterungsanimation
Ich habe eine Navigationsleiste mit einem erweite...