Beispielcode für CSS zum Erzielen eines Bildzoomeffekts und eines langsamen Übergangseffekts beim Bewegen der Maus

Beispielcode für CSS zum Erzielen eines Bildzoomeffekts und eines langsamen Übergangseffekts beim Bewegen der Maus

transform:scale() lässt sich ein proportionales Vergrößern oder Verkleinern erreichen.
transition können Sie die Ausführungszeit der Animation festlegen, um eine langsame oder schnelle Animationsausführung zu erreichen. Das Effektdiagramm ist wie folgt:

Bildbeschreibung hier einfügen

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:

Bildbeschreibung hier einfügen

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...

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...

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...

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...