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

Implementierung und Optimierung von MySql-Unterabfragen IN

CSS3-Mauszeiger-Übergangszoomeffekt

Implementierung und Optimierung von MySql-Unterabfragen IN

Spezifische Verwendung von CSS-Inhaltsattributen

Verwenden Sie die Vue3+Vant-Komponente, um die Suchverlaufsfunktion der App zu implementieren (Beispielcode).

So implementieren Sie einen Animationsübergangseffekt im Frontend

So schreiben Sie hochwertigen JavaScript-Code

JavaScript implementiert den Front-End-Countdown-Effekt

Vue implementiert Fuzzy-Abfrage-MySQL-Datenbankdaten

Verwendung der hasOwnProperty-Methode des js-Attributobjekts

Überblick und Anwendung von Positionsattributen (absolut|relativ|statisch|fest) in CSS

Detaillierte Erläuterung gängiger MySQL-Befehle im Linux-Terminal

Artikel empfehlen

Vue implementiert nahtloses Scrollen von Listen

10 Fähigkeiten, die Frontend-Entwickler millionenschwer machen

Lösen Sie das Problem, dass der Node.js MySQL-Client das Authentifizierungsprotokoll nicht unterstützt

Detaillierte Erläuterung des Funktionsprinzips und der Lösung der Js-Modularisierung

Spezifische Verwendung von useRef in React

Detaillierte Erklärung zum MySQL-Index

MySQL-Datenoperation – Verwendung von DML-Anweisungen

HTML-Auszeichnungssprache - Referenz

Detaillierte Erklärung von Cgroup, dem Kernprinzip von Docker

Warum wird für die Webseitenkodierung UTF-8 statt GBK oder GB2312 verwendet?

So rufen Sie mit dem Flash-Plugin die Kamera des PCs auf und binden diese in die TML-Seite ein

So fügen Sie einer großen MySQL-Tabelle eine Spalte hinzu

Praktischer grundlegender Beispielcode für den Linux-Befehl sed

Grundlegendes Tutorial zur Verwendung der Explain-Anweisung in MySQL

CSS3-Analyse der Schritte zur Erstellung des Douyin-LOGO