Karussellbild mit CSS erstellen-CSS-Tutorial-php.cn

Karussellbild mit CSS erstellen

王林

Freigeben： 2020-02-29 18:01:52

nach vorne

2768 Leute haben es durchsucht

Karussellbild mit CSS erstellen

Das Folgende ist der Stilteil:

<style>
    *{margin:0;padding:0;}
    a{text-decoration:none}
    li{list-style:none;}

Nach dem Login kopieren

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;}

Nach dem Login kopieren

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;}

Nach dem Login kopieren

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;}

Nach dem Login kopieren

Pause festlegen, wenn die Maus darüberrollt

#box:hover ul{animation-play-state:paused;}

Nach dem Login kopieren

Animationsnamen der Animation und Bewegungsrichtung des Karussells (Animation) festlegen Wirkung)

    @keyframes animal {
        0%{margin-left:0;}
        100%{margin-left:-1463px;}
    }
</style>

Nach dem Login kopieren

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>

Nach dem Login kopieren

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!