CSS3-Mauszeiger-Übergangszoomeffekt

Das Folgende ist ein Bild-Zoom-Effekt, der in reinem CSS geschrieben ist. Tatsächlich ist das Grundprinzip sehr einfach. Wir können feststellen, dass sie alle beim Besuch einiger Websites interaktive Effekte auf Bilder haben. Natürlich gibt es viele Möglichkeiten, Bildübergangseffekte zu erzielen, z. B. durch die Verwendung von JQuery oder einiger js-Animationsbibliotheken von Drittanbietern. Dieses Beispiel zeigt nur die grundlegenden Effekte und fasst das verwendete Wissen nicht zusammen.
Der Code lautet wie folgt:

<!DOCTYPE html>
<html lang="de">

<Kopf>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-kompatibel" content="IE=edge">
    <meta name="viewport" content="width=Gerätebreite, Anfangsmaßstab=1.0">
    <title>Dokument</title>
    <Skript></Skript>
    <Stil>
        * {
            Box-Größe: Rahmenbox;
        }

        Körper {
            Hintergrundfarbe: rgb(251, 163, 163);
        }
        /* Balkendiagrammstil*/
        .enthaltene Liste {
            Position: relativ;
         
            Rand oben: 100px;
            Rand links: 10 %;

            Höhe: 100px;
            Breite: 80%;

            Überlauf: versteckt;
            Rahmenradius: 30px;
            Box-Schatten: RGB (54, 53, 53) 10px 10px 10px;
         

        }
        .Liste {
           
            Position: absolut;
            Breite: 100 %;
            Höhe: 100%;

            Hintergrundposition: Mitte;
            Hintergrundgröße: Abdeckung;

            Rahmenradius: 30px;
            Übergang: 0,5 s;
            
            Farbe: weiß;
            Schriftstärke: fett;
            Textausrichtung: zentriert;
        }
       
        .Liste:Hover {
            transformieren: Skalierung (1,2);
        }
    </Stil>
</Kopf>

<Text>
   
    <h1 style="text-align: center;color: white;background-color: black;">Effekttest</h1>
    <!-- Balkendiagramm-->
    <div Klasse="Enthaltsliste">
        <div Klasse = "Liste" Stil = "Hintergrundbild: URL (006.jpg);">
            Kimono-Mädchen
    </div>

    <div Klasse="Enthaltsliste">
        <div Klasse = "Liste" Stil = "Hintergrundbild: URL (001.png);">
            Himmelsspiegel</div>
    </div>

    <div Klasse="Enthaltsliste">
        <div Klasse = "Liste" Stil = "Hintergrundbild: URL (002.png);">
            Lila Landschaft</div>
    </div>

    <div Klasse="Enthaltsliste">
        <div Klasse = "Liste" Stil = "Hintergrundbild: URL (003.png);">
            Ich bin sehr süß</div>
    </div>

     
</body>

</html>

Tatsächliche Wirkung :

Bildbeschreibung hier einfügen

Git-Diagramm

Bildbeschreibung hier einfügen

Den Stil des Bildes können Sie selbst ändern, um Ihren eigenen Mittelschulstil zu kreieren.

Dies ist das Ende dieses Artikels über den CSS3-Mouse-Hover-Übergangszoomeffekt. Weitere verwandte CSS3-Mouse-Hover-Übergangszoominhalte finden Sie in den vorherigen Artikeln von 123WORDPRESS.COM oder in den verwandten Artikeln unten. Ich hoffe, dass jeder 123WORDPRESS.COM in Zukunft unterstützen wird!

<<: Detaillierte Erklärung, wie man IP-Adressen effektiv in MySQL speichert und wie man zwischen String-IP und numerischen Werten konvertiert

>>: Detaillierte Schritte zur Entwicklung einer Java-Zahlungsschnittstelle für Alipay

So überprüfen Sie, ob die Ports des lokalen Computers und des Remote-Servers unter Linux verbunden sind

CSS3-Mauszeiger-Übergangszoomeffekt

So überprüfen Sie, ob die Ports des lokalen Computers und des Remote-Servers unter Linux verbunden sind

Lösung für das Problem der Werteübergabe zwischen HTML-Seiten

JavaScript zum Implementieren einer einfachen Uhr

JS implementiert einen einfachen TodoList-Effekt (Notizblock)

Grafisches Tutorial zur Installation und Konfiguration von MySQL 8.0.12 (Windows 10)

Vue.js implementiert ein einfaches Faltpanel

Verwendung des Linux-Befehls ifconfig

Detaillierte Erklärung des JavaScript-Timer-Prinzips

Detaillierte Schritte zum Erstellen eines NFS-Dateifreigabeservers unter Linux

Implementierung der schnellen Projektkonstruktion von vue3.0+vant3.0

Artikel empfehlen

Eine kurze Diskussion zum Erstellen eines Clusters in nodejs

Der JavaScript-Artikel zeigt Ihnen, wie Sie mit Webformularen spielen

So überwachen Sie den Ausführungsstatus eines Docker-Container-Shell-Skripts

Docker exec führt mehrere Befehle aus

jQuery implementiert eine einfache Änderung der Schaltflächenfarbe

JavaScript-Canvas zum Erzielen von Meteoreffekten

Detaillierte Erklärung zur Verwendung der Vue h-Funktion

Beispiel für die Installation und Bereitstellung von Docker unter Linux

MySQL-Abfrage – Erlernen grundlegender Abfrageoperationen

Kurze Analyse des MySQL-Zeichensatzes, der Datenbankwiederherstellungsfehler verursacht

MySQL-Kodierung utf8 und utf8mb4 utf8mb4_unicode_ci und utf8mb4_general_ci

Detaillierte Erläuterung der offiziellen Gesichtsüberprüfung des WeChat Mini-Programms

Detaillierte Erläuterung der Methode zum Vergleichen von Daten in MySQL

Detaillierte Erklärung des CSS3-Rotationswürfelproblems

Zusammenfassung der Erfahrungen mit der Web-Frontend-Entwicklung