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
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...
Grafisches Tutorial zur Installation der neuesten Version des MySQL-Servers unter Windows 7 64 Bit
In letzter Zeit habe ich die MySQL-Datenbank unte...
Implementierung der Vue-Einzeldateikomponente
Ich habe kürzlich über Vue gelesen. Ich habe eine...
Lassen Sie uns über die Merkmale und Isolationsstufen von MySQL-Transaktionen sprechen
Das Internet ist bereits voll von Artikeln dieser...
MySQL weist eine Riddle-Sicherheitslücke auf, die zum Verlust von Benutzernamen und Passwörtern führen kann
Die Riddle-Sicherheitslücke, die auf die MySQL-Ve...
Detaillierte Erläuterung des Prozesses zur Bereitstellung von Tomcat und zur Erstellung des ersten Webprojekts in IDEA 2020.3.1
Inhaltsverzeichnis Tomcat-Einführung Tomcat-Berei...
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...
HTML-Textfeld (Text) ist nicht in mehreren Möglichkeiten verfügbar, um schreibgeschützt zu erreichen
Methode 1: <input id= "File1" type= &...
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...
MySql-Batch-Insert-Optimierung. Beispiel für SQL-Ausführungseffizienz. Detaillierte Erklärung
MySql-Batch-Insert-Optimierung. Beispiel für SQL-...