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
Projekthintergrund Seit kurzem gibt es ein Projek...
CSS-Selektoren Durch Festlegen des Stils für das ...
Vorwort Die Verwaltung des Routings ist eine wese...
1. Die drei Dateien /etc/hosts, /etc/resolv.conf ...
Inhaltsverzeichnis Vorwort 1. Stildurchdringung 1...
Inhaltsverzeichnis Tutorial-Reihe 1. MySQL-Archit...
Wenn die Datenbank gleichzeitig denselben Datenst...
Beim dynamischen Verketten von Zeichenfolgen verw...
Problembeschreibung Die MySQL-Startfehlermeldung ...
Installation und Konfiguration von MySQL8.0.22 (s...
Sophie Hardach Kai von Clyde Quay 37 Ost Seifenkis...
Um den blinkenden Hintergrundfarbeffekt zu erziele...
Bei DB-Benchmarktests sind QPS und TPS wichtige I...
Vorwort ORDER BY 字段名升序/降序. Ich glaube, jeder hier...
Inhaltsverzeichnis 1. Was ist scrapy_splash? 2. D...