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
So eine Jalousie ist maßstabsgetreu. Wie bringt man das Bild dazu, sich wie im Demonstrations-GIF zu bewegen?
.container ul:hover li{
Breite: 40px;
}
.container ul li:hover{
Breite: 600px;
}
Diese Demo ist eigentlich eine Übung zur flexiblen Verwendung des :hover-Attributs. 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! |
>>: Welche Funktion ist !-- -- im HTML-Seitenstil?
Artikel empfehlen
Detaillierte Erläuterung des Nginx-HTTP-Ressourcenanforderungslimits (drei Methoden)
Voraussetzung: nginx muss über die Module ngx_htt...
Javascript Blob-Objekt zum Erzielen eines Dateidownloads
Inhaltsverzeichnis veranschaulichen 1. Blob-Objek...
Docker-Netzwerkmodus und Konfigurationsmethode
1. Docker-Netzwerkmodus Wenn Docker Run einen Doc...
Details zur Verwendung des JSON-Typs in MySQL 5.7
JSON ist ein leichtes Datenaustauschformat, das e...
Natives JS zur Implementierung eines atmenden Karussells
Heute zeige ich Ihnen ein mit nativem JS implemen...
Grafisches Tutorial zur Installation und Konfiguration von MySQL 5.7.13 auf dem Mac
MySQL 5.7.13 Installations-Tutorial für Mac, sehr...
Beispiele für die Verwendung von HTML-Marquee-Tags
Dieses Tag ist nicht Teil von HTML3.2 und unterstü...
Zusammenfassung der MySQL-Slow-Log-Praxis
Langsame Protokollabfragefunktion Die Hauptfunkti...
Mysql 8.0.18 Hash-Join-Test (empfohlen)
Hash-Join Für die Ausführung von Hash Join sind k...
Löschen von Dateien mit Leerzeichen in Linux (keine Verzeichnisse)
In unserer täglichen Arbeit kommen wir oft mit Da...
Ubuntu-Terminal, mehrere Fenster, geteilter Bildschirm, Terminator
1. Installation Das größte Feature von Terminator...
Detaillierte Erklärung der Destrukturierungszuweisung in JavaScript
Inhaltsverzeichnis Konzept Array-Destrukturierung...
Abfrage der Daten des Tages vor dem aktuellen Zeitintervall in MySQL
1. Hintergrund In tatsächlichen Projekten stoßen ...
So verbinden Sie SpringBoot mit MySQL, um Daten abzurufen und in die Backend-Schnittstelle zu schreiben
Inhaltsverzeichnis 1. Neues Projekt erstellen 2. ...
Linux-Befehl „exa“ (bessere Dateianzeige als „ls“)
Installieren Befolgen Sie zur Installation die RE...