Beispiel für die Anzeige von Bildjalousien mit reinem CSS

Lassen Sie mich Ihnen zunächst den fertigen Effekt zeigen

Hauptidee: Tatsächlich verwendet diese Jalousie immer noch eine Art Taschenspielertrick. Es scheint, als würde sich das Bild vergrößern, wenn wir mit der Maus darüber fahren. Tatsächlich bewegen sich diese Bilder überhaupt nicht. Wir setzen diese Bilder einfach in eine Liste, legen sie übereinander und ändern die Breite der Liste, wenn wir die Maus bewegen.

Erster Schritt: Bauen Sie einen Fensterladenrahmen

HTML Quelltext:

<div Klasse="Container">
        <ul>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
        </ul>
    </div>

CSS Code:

 *{
            Rand: 0;
            Polsterung: 0;
        }
        .Container{
            Rand: 100px automatisch;
            Rand: 2px durchgezogen #568bc7;
            Breite: 800px;
            Höhe: 300px;
        }
        .container ul{
            Anzeige: Flex;
        }
        .container li{
            Breite: 160px;
            Höhe: 300px;
            Listenstil: keiner;
            Rahmen links: 1px durchgezogen #194b8d;
        }
        .container li img{
            Anzeige: Block;
            Breite: 800px;
            Höhe: 300px;
        }

Hinweis: Die Breite des li muss hier möglicherweise manuell berechnet werden. Obwohl die elastische Box verwendet werden kann, um eine automatische gleichmäßige Teilung zu erreichen, habe ich nach dem Hinzufügen von Hover einen Fehler gefunden. Sie können es versuchen. Die elastische Box wird hier nicht verwendet. Jetzt wird das folgende Framework erhalten:

Schritt 2: Bild einfügen und mit Hover Spezialeffekte erzeugen

Ich habe hier fünf Gemälde eingefügt

Hier können wir feststellen, dass das Bild den Umfang unseres Containers überschreitet

An dieser Stelle fügen wir einen versteckten Überlauf hinzu
Überlauf: versteckt;

So eine Jalousie ist maßstabsgetreu. Wie bringt man das Bild dazu, sich wie im Demonstrations-GIF zu bewegen?
Hier ist ein Kerncode

  .container ul:hover li{
            Breite: 40px;
        }
    .container ul li:hover{
            Breite: 600px;
        }

Diese Demo ist eigentlich eine Übung zur flexiblen Verwendung des :hover-Attributs.
Beachten Sie zunächst, dass die Reihenfolge der beiden Codezeilen nicht geändert werden kann. Wenn die Maus in den großen Container von ul bewegt wird, verkleinern wir zunächst die Breite von li und lösen dann das Hovern der nächsten Zeile aus. Wenn Sie in jedes li fahren, vergrößern wir die Breite von li.

Schritt 3: Details

Nachdem wir das Obige abgeschlossen haben, können wir sehen, dass der gesamte Prozess sehr steif ist. Hier können wir Übergangsattribute hinzufügen, um die Änderung sanfter zu gestalten. Fügen Sie gleichzeitig dem linken Rand jedes Li einen kleinen Schatteneffekt hinzu, damit es dreidimensionaler aussieht.

  Kastenschatten: 0 0 25px #000;
	Übergang: alle 0,5 s;

Endlich ist es geschafft

Hier ist der vollständige Code:

<!DOCTYPE html>
<html lang="de">
<Kopf>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=Gerätebreite, Anfangsmaßstab=1.0">
    <title>Dokument</title>
    <Stil>
        *{
            Rand: 0;
            Polsterung: 0;
        }
        .Container{
            Rand: 100px automatisch;
            Rand: 2px durchgezogen #568bc7;
            Breite: 800px;
            Höhe: 300px;
            Überlauf: versteckt;
        }
        .container ul{
            Anzeige: Flex;
        }
        .container li{
            Breite: 160px;
            Höhe: 300px;
            Listenstil: keiner;
            Rahmen links: 1px durchgezogen #194b8d;
            Kastenschatten: 0 0 25px #000;
			Übergang: alle 0,5 s;
        }
        .container li img{
            Anzeige: Block;
            Breite: 800px;
            Höhe: 300px;
        }
        .container ul:hover li{
            Breite: 40px;
        }
        .container ul li:hover{
            Breite: 600px;
        }
    </Stil>
</Kopf>
<Text>
    <div Klasse="Container">
        <ul>
            <li><img src="./img/tq1.jpg" alt=""></li>
            <li><img src="./img/tq2.jpg" alt=""></li>
            <li><img src="./img/tq3.jpg" alt=""></li>
            <li><img src="./img/tq4.jpg" alt=""></li>
            <li><img src="./img/tq5.jpg" alt=""></li>
        </ul>
    </div>
</body>
</html>

Dies ist das Ende dieses Artikels darüber, wie Sie mit reinem CSS einen Bildjalousien-Anzeigeeffekt erzielen. Weitere relevante Inhalte zu CSS-Bildjalousien finden Sie in den vorherigen Artikeln von 123WORDPRESS.COM oder in den folgenden verwandten Artikeln. Ich hoffe, Sie werden 123WORDPRESS.COM auch in Zukunft unterstützen!

<<: Verwenden Sie @font-face, um Sonderzeichen auf Webseiten zu implementieren (benutzerdefinierte Schriftarten erstellen)

>>: Welche Funktion ist !-- -- im HTML-Seitenstil?

Tiefgreifendes Verständnis der sieben Kommunikationsmethoden von Vue-Komponenten

Beispiel für die Anzeige von Bildjalousien mit reinem CSS

Tiefgreifendes Verständnis der sieben Kommunikationsmethoden von Vue-Komponenten

Vergleich zwischen Node.js und Deno

So erstellen Sie einen NFS-Dienst in Ubuntu 16.04

Vollständiger Code von Vue + iView zur Realisierung der Excel-Upload-Funktion

Das Vue-Projekt konfiguriert den Webpack-Obfuscator, um Codeverschlüsselung und -verschleierung zu implementieren.

Fallstudie zu JavaScript Anti-Shake

Beispiel zum Einbetten von H5 in die Webansicht des WeChat-Applets

Detaillierte Erläuterung des MySQL MVCC-Mechanismusprinzips

Implementierung der Einstellungen für virtuellen Nginx-Host basierend auf Domänenname, Port und unterschiedlicher IP

Beispielcode für den Anzeigeeffekt zum Schütteln und Vergrößern von JS-Albumbildern

Artikel empfehlen

Verwenden Sie Vue3 zur Datenbindung und Anzeigelistendaten

mysql8.0: Passwortänderung vergessen und Problem mit ungültigem Net-Befehlsdienstnamen

Zusammenfassung der MySQL-Datenmigration

Eine kleine Sammlung von HTML-Meta-Tags

Die Qualitäten und Fähigkeiten, die ein Webdesigner haben sollte

Detaillierte Erklärung der Installationsbefehle und Verwendung von Docker und FastDFS

Theorie: Die zwei Jahre User Experience

Grafisches Tutorial zur Installation der MySQL 8.0.12-Dekomprimierungsversion unter Windows 10

Lernen Sie die MySQL-Zeichensatzeinstellungen in 5 Minuten kennen

So stellen Sie über Navicat eine Remoteverbindung zu MySQL her

Schritte zur Implementierung der Autorisierungsanmeldung für das WeChat-Applet von Uni-App

Wie gestaltet man eine Webseite? Wie erstelle ich eine Webseite?

MySQL Serie 12 Backup und Wiederherstellung

CSS fixiert das Tag auf Containerebene (div...) an einer Position (ganz rechts auf der Seite)

Reagieren Sie auf die Verarbeitung von Fehlergrenzkomponenten