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
Methode zur Realisierung einer automatisierten Bereitstellung basierend auf Docker + Jenkins
Verwenden Sie Code Cloud, um ein Git-Code-Speiche...
Einfaches Tutorial zu den Firewall-Einstellungen unter Ubuntu 20.04 (Anfänger)
Vorwort In der heutigen, immer bequemeren Interne...
Detaillierte Erklärung der Zeichensätze und Validierungsregeln in MySQL
1Mehrere gängige Zeichensätze Zu den gängigsten Z...
Detaillierte Erläuterung von drei Möglichkeiten, Docker-Container miteinander zu verbinden
Es gibt drei Möglichkeiten, Docker-Container mite...
Beispiel zum Erstellen eines öffentlichen Harbor-Repository mit Docker
Im vorherigen Blogbeitrag ging es um das private ...
Detaillierte Erklärung der Verwendung des Positionsattributs in HTML (vier Typen)
Die vier Eigenschaftswerte von Position sind: 1.V...
MySQL-Abfragebaumstrukturmethode
Inhaltsverzeichnis MySQL-Abfragebaumstruktur 1. Ü...
Nginx-Konfiguration: Trennung von PC-Site und mobiler Site zur Realisierung der Umleitung
Verwenden Sie nginx, um die Trennung von PC-Site ...
Einführung in die Einrichtung von Tomcat für den automatischen Start auf einem Linux-System
1. Wechseln Sie in das Verzeichnis /etc/init.d: ...
Implementierungsschritte zum Erstellen eines lokalen Webservers auf Centos8
1 Übersicht System CentOS8, verwenden Sie httpd, ...
Kodierungsprobleme und -lösungen, wenn MySQL zwei Tabellen verknüpft
Wenn Mysql zwei Tabellen verknüpft, wird eine Feh...
Zusammenfassung verschiedener Replikationsmethoden für die MySQL Master-Slave-Replikation
Asynchrone Replikation Die MySQL-Replikation erfo...
Einführung in Container-Datenvolumes in Docker
Inhaltsverzeichnis Datenvolumen des Docker-Contai...
Verwenden von Textschatten- und Elementschatteneffekten in CSS
Einführung in Textschatten Verwenden Sie in CSS d...
Detaillierte Vorgänge zum Erstellen des gemeinsamen Clusters und des Spiegelclusters von RabbitMq mit Docker
Inhaltsverzeichnis 1. Erstellen Sie die Betriebsu...