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
Implementierung der Codeaufteilung von Webpack3+React16
Projekthintergrund Seit kurzem gibt es ein Projek...
Beispielcode zum Festlegen des Beschriftungsstils mithilfe des CSS-Selektors
CSS-Selektoren Durch Festlegen des Stils für das ...
Führen Sie die folgenden Schritte aus, um Vue-Router in Vue3 zu verwenden
Vorwort Die Verwaltung des Routings ist eine wese...
Beheben Sie das Problem, dass einige Konfigurationsdateien in /etc nach dem Neustart des Docker-Containers zurückgesetzt werden
1. Die drei Dateien /etc/hosts, /etc/resolv.conf ...
Einige Tipps zur Verwendung von Less in Vue-Projekten
Inhaltsverzeichnis Vorwort 1. Stildurchdringung 1...
MySQL-Serie 9 MySQL-Abfrage-Cache und -Index
Inhaltsverzeichnis Tutorial-Reihe 1. MySQL-Archit...
Umfassende Analyse der Isolationsebenen in MySQL
Wenn die Datenbank gleichzeitig denselben Datenst...
Probleme bei der Verwendung mehrerer einfacher und dreifacher Anführungszeichen in MySQL concat
Beim dynamischen Verketten von Zeichenfolgen verw...
So lösen Sie das Problem, dass MySQL nicht gestartet werden kann, da keine PID erstellt werden kann
Problembeschreibung Die MySQL-Startfehlermeldung ...
Grafisches Tutorial zur Installation und Konfiguration von MySQL 8.0.22
Installation und Konfiguration von MySQL8.0.22 (s...
Teilen Sie 20 hervorragende Beispiele für Webformular-Design
Sophie Hardach Kai von Clyde Quay 37 Ost Seifenkis...
Verwenden Sie Schaltflächenauslöserereignisse, um einen blinkenden Hintergrundfarbeffekt zu erzielen
Um den blinkenden Hintergrundfarbeffekt zu erziele...
Bedeutung und Berechnungsmethode von QPS und TPS der MySQL-Datenbank
Bei DB-Benchmarktests sind QPS und TPS wichtige I...
Einige weniger bekannte Sortiermethoden in MySQL
Vorwort ORDER BY 字段名升序/降序. Ich glaube, jeder hier...
Erweiterter Crawler - Verwendung der Scrapy_splash-Komponente für automatisches JS-Rendering
Inhaltsverzeichnis 1. Was ist scrapy_splash? 2. D...