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

Zusammenfassung der 11 häufigsten Fehler von MySQL-Anfängern

CSS3-Mauszeiger-Übergangszoomeffekt

Zusammenfassung der 11 häufigsten Fehler von MySQL-Anfängern

Erfahren Sie in 3 Minuten, wie Sie den Supervisor Watchdog verwenden

Tutorial zum Installieren und Ändern des Root-Passworts der dekomprimierten Version von MySQL 5.7.20

Vue realisiert kaskadierende Auswahl von Provinzen, Städten und Bezirken

So konfigurieren Sie Openbox für den Linux-Desktop (empfohlen)

Best Practices zum Teilen von React-Code

Spezifische Verwendung der MySQL-Segmentierungsfunktion substring()

Fragen zum Vorstellungsgespräch zu JS 9 Promise

Zusammenfassung der verschiedenen Haltungen der MySQL-Berechtigungseskalation

Baidu Input Method öffnet API und behauptet, es könne portiert und nach Belieben verwendet werden

Artikel empfehlen

MySQL verwendet UNIQUE, um das Einfügen nicht doppelter Daten zu implementieren

CSS3-Lösung für das Problem des Einfrierens auf Mobilgeräten (Optimierung der Animationsleistung)

Lösung für das Problem „Linux QT Kit fehlt“ und „Version leer“

Vue verwendet Vue-Metainformationen, um den Titel und die Metainformationen jeder Seite festzulegen

So finden Sie bei der Anmeldeoberfläche die richtige Balance zwischen Benutzerfreundlichkeit und Sicherheit

Docker verwendet Nextcloud, um eine private Baidu-Cloud-Festplatte zu erstellen

So installieren und konfigurieren Sie Redis in CentOS7

JavaScript-Modularität erklärt

Der Unterschied zwischen Löschen, Abschneiden und Löschen und wie man wählt

Grafisches Tutorial zur Installation von MySQL 5.6.35 unter Windows 10 64-Bit

Detaillierte Erläuterung des Implementierungsprozesses der ServerSocket-Standard-IP-Bindung

So sichern Sie MySQL unter Linux automatisch remote

So benennen Sie die Tabelle in MySQL um und worauf Sie achten müssen

Detaillierte Erläuterung der dauerhaften Speicherung von Redis unter Docker

WeChat-Applet implementiert ein einfaches Würfelspiel