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
Tutorial zur mobilen Entwicklung: Zusammenfassung der Pixelanzeigeprobleme
Vorwort Ich bin davon überzeugt, dass bei der Ent...
Detaillierte Erklärung der MySQL 8.0.18-Befehle
Öffnen Sie den gerade entpackten Ordner C:\web\my...
Der Unterschied zwischen Löschen, Abschneiden und Löschen und wie man wählt
Vorwort Letzte Woche fragte mich ein Kollege: „Br...
So implementieren Sie das Strategiemuster in Javascript
Inhaltsverzeichnis Überblick Code-Implementierung...
Zusammenfassung gängiger Befehle für den Einstieg in die MySQL-Datenbankgrundlagen
Dieser Artikel beschreibt anhand von Beispielen d...
Detaillierte Erläuterung der Nginx-Zugriffsbeschränkungskonfiguration
Was ist die Nginx-Zugriffsbeschränkungskonfigurat...
Der Unterschied zwischen MySQL-Benutzerverwaltung und PostgreSQL-Benutzerverwaltung
1. MySQL-Benutzerverwaltung [Beispiel 1.1] Melden...
Vue verwendet Echart, um Beschriftungen und Farben anzupassen
In diesem Artikelbeispiel wird der spezifische Co...
Eine kurze Diskussion über die Simulation von Multithread- und Multiprozess-Abstürzen in Linux
Abschluss: Wenn in einer Multithread-Umgebung ein...
So implementieren Sie einen einfachen HTML-Videoplayer
Dieser Artikel stellt die Methode zur Implementie...
HTML-Kommentare Symbole zum Markieren von Textkommentaren in HTML
HTML-Kommentare: Wir müssen häufig einige HTML-Ko...
Vue + webrtc (Tencent Cloud) Praxis der Implementierung der Live-Broadcast-Funktion
Inhaltsverzeichnis 1. Live-Übertragungseffekt 2. ...
Detaillierte Erläuterung der Verwendung von Docker-Tag und Docker-Push
Detaillierte Erklärung des Docker-Tags Die Verwen...
Schriftreferenzen und Übergangseffekte außerhalb des Systems
Code kopieren Der Code lautet wie folgt: <span...
Beschreibung der chinesischen Sortierregeln für MySQL
Bei der Verwendung von MySQL sortieren und fragen...