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

Detaillierte Erklärung des Unterschieds zwischen Tags und Elementen in HTML

Ich glaube, dass es vielen Freunden, die sich mit ...

So richten Sie geplante Sicherungsaufgaben in Linux CentOS ein

Implementierungsvorbereitung # Der Dateipfad muss...

Implementierung der Vue-Einzeldateikomponente

Ich habe kürzlich über Vue gelesen. Ich habe eine...

Konfigurationsmethode für das Nginx-Anforderungslimit

Nginx ist ein leistungsstarker, leistungsstarker ...

Implementierung der Breakpoint-Wiederaufnahme in Node.js

Vorwort Normaler Geschäftsbedarf: Hochladen von B...

Beispiel für die Implementierung einer Komponente mit fester Unterseite in Vue

Inhaltsverzeichnis 【Wirkung】 【Implementierungsmet...

Einfache Implementierung zum Ausblenden der Bildlaufleiste in HTML

1. HTML-Tags mit Attributen XML/HTML-CodeInhalt i...

Schritte zum Bereitstellen eines Docker-Projekts in IDEA

Mittlerweile werden die meisten Projekte auf Dock...

Beispiel für das Erreichen eines Deckeneffekts mit dem WeChat-Applet

Inhaltsverzeichnis 1. Umsetzung 2. Probleme 3. Üb...