Heim > Artikel > Web-Frontend > Karussellbild mit CSS erstellen
Karussellbild mit CSS erstellen
- 王林nach vorne
- 2020-02-29 18:01:522830Durchsuche
Das Folgende ist der Stilteil:
<style>
*{margin:0;padding:0;}
a{text-decoration:none}
li{list-style:none;}Die Designbreite sollte die Gesamtbreite des Karussellbilds zuzüglich der Breite des ersten Bilds (zuzüglich der) nicht überschreiten erstes Bild Die Breite dient dazu, dass der Karusselleffekt sichtbar ist.) Meine hat eine Breite von 1500 und eine Höhe von 200 und stellt dann das Ausblenden des Überlaufs ein (um die Bewegung aus dem Anzeigebereich heraus zu eliminieren und trotzdem anzuzeigen)
#box{width:1500px;height:200px;margin:0 auto;overflow:hidden;}1000 % ist eine faule Schreibweise, um die Breite von ul breiter einzustellen.
(Empfohlenes Tutorial: CSS-Einführungs-Tutorial)
Der Name der Karussellanimation, wie lange es dauert, sich einmal zu drehen
#box ul{height:200px;width:1000%;animation:animal 4s linear infinite;}Setzen Sie float auf alle Bilder in einer Zeile anzeigen und die Breite des Bildes festlegen
#box ul li{float:left;width:133px;height:200px;}Pause festlegen, wenn die Maus darüberrollt
#box:hover ul{animation-play-state:paused;}Animationsnamen der Animation und Bewegungsrichtung des Karussells (Animation) festlegen Wirkung)
@keyframes animal {
0%{margin-left:0;}
100%{margin-left:-1463px;}
}
</style>Das Folgende ist der Körperteil
Auf Karussellbilder kann im Allgemeinen durch Klicken zugegriffen werden, daher werden sie im a-Tag platziert
<body>
<div id="box">
<ul>
<li><a href="#"><img src="images/1.jpg" /></a></li>
<li><a href="#"><img src="images/2.jpg" /></a></li>
<li><a href="#"><img src="images/3.jpg" /></a></li>
<li><a href="#"><img src="images/4.jpg" /></a></li>
<li><a href="#"><img src="images/5.jpg" /></a></li>
<li><a href="#"><img src="images/6.jpg" /></a></li>
<li><a href="#"><img src="images/7.jpg" /></a></li>
<li><a href="#"><img src="images/8.jpg" /></a></li>
<li><a href="#"><img src="images/9.jpg" /></a></li>
<li><a href="#"><img src="images/10.jpg" /></a></li>
<li><a href="#"><img src="images/11.jpg" /></a></li>
<li><a href="#"><img src="images/1.jpg" /></a></li>
<li><a href="#"><img src="images/2.jpg" /></a></li>
<li><a href="#"><img src="images/3.jpg" /></a></li>
<li><a href="#"><img src="images/4.jpg" /></a></li>
<li><a href="#"><img src="images/5.jpg" /></a></li>
<li><a href="#"><img src="images/6.jpg" /></a></li>
<li><a href="#"><img src="images/7.jpg" /></a></li>
<li><a href="#"><img src="images/8.jpg" /></a></li>
<li><a href="#"><img src="images/9.jpg" /></a></li>
<li><a href="#"><img src="images/10.jpg" /></a></li>
<li><a href="#"><img src="images/11.jpg" /></a></li>
<li><a href="#"><img src="images/1.jpg" /></a></li>
</ul>
</div>
</body>Für weitere programmbezogene Informationen Bitte beachten Sie die Spalte Einführung in die Programmierung auf der chinesischen PHP-Website!
Das obige ist der detaillierte Inhalt vonKarussellbild mit CSS erstellen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!