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
Interviewer stellen häufig Fragen zum Lebenszyklus von React
React-Lebenszyklus Zwei Bilder zum besseren Verst...
JavaScript zum Implementieren des Vorladens und verzögerten Ladens von Bildern
In diesem Artikel wird der spezifische Code zur I...
Linux Dateisystemtyp anzeigen Beispielmethode
So überprüfen Sie den Dateisystemtyp einer Partit...
Teilen Sie die von Webdesign-Meistern häufig verwendeten responsiven Frameworks (Zusammenfassung)
Dieser Artikel stellt die von Webdesign-Meistern ...
Entwerfen Sie einen Datensammler mit Vue
Inhaltsverzeichnis Szenario Kernthemen Statusüber...
Die neue Version der Chrome-Browsereinstellungen ermöglicht die domänenübergreifende Implementierung
Vorwort Derzeit löst das Front-End domänenübergre...
Lassen Sie die Webseite nach dem Öffnen für einige Sekunden auf andere Seiten umleiten
Fügen Sie einfach den folgenden Code hinzu, um die...
MySQL-Methode zum rekursiven Suchen nach allen untergeordneten Knoten eines Menüknotens
Hintergrund Im Projekt besteht die Anforderung, a...
Erläuterung der CSS3-Überlaufeigenschaft
1. Überlauf Überlauf ist Überlauf (Container). We...
Confluence mit Docker bereitstellen
1. Umweltanforderungen 1. Docker 17 und höher wur...
Verschiedene Probleme und Lösungen beim Bereitstellen von Tomcat zur Veröffentlichung von Projekten unter Linux
Bereitstellen des Projekts in der Testumgebung de...
Lösen Sie das Problem, dass Navicat keine Verbindung zu MySQL auf dem Linux-Server herstellen kann
Am Anfang war ich traurig. Die Screenshots sind w...
Eine kurze Erläuterung des zugrunde liegenden Prinzips von MySQL Join
Inhaltsverzeichnis Join-Algorithmus Der Unterschi...
js implementiert ein einfaches Warenkorbmodul
In diesem Artikelbeispiel wird der spezifische Co...
CSS-Leistungsoptimierung - detaillierte Erklärung der Will-Change-Verwendung
will-change teilt dem Browser mit, welche Änderun...