Maison > Article > interface Web > Créer une image carrousel avec CSS
Créer une image carrousel avec CSS
- 王林avant
- 2020-02-29 18:01:522744parcourir
Ce qui suit est la partie style :
<style>
*{margin:0;padding:0;}
a{text-decoration:none}
li{list-style:none;}La largeur du design ne doit pas dépasser la largeur totale de l'image du carrousel, plus la largeur de la première image (plus la première image La largeur est pour que l'effet carrousel soit visible) La mienne est une largeur de 1500 et une hauteur de 200, puis définissez le masquage du débordement (pour éliminer le mouvement hors de la zone d'affichage et toujours afficher)
#box{width:1500px;height:200px;margin:0 auto;overflow:hidden;}1000% est une façon paresseuse d'écrire, afin de définir la largeur de ul plus large.
(Tutoriel recommandé : Tutoriel d'introduction CSS)
Le nom de l'animation du carrousel, combien de temps il faut pour tourner une fois
#box ul{height:200px;width:1000%;animation:animal 4s linear infinite;}Définir float sur faire toutes les images Affichage d'une ligne et la largeur de l'image
#box ul li{float:left;width:133px;height:200px;}Définir la pause lorsque la souris survole
#box:hover ul{animation-play-state:paused;}Définir le nom de l'animation de l'animation et la direction de déplacement du carrousel (animation effet)
@keyframes animal {
0%{margin-left:0;}
100%{margin-left:-1463px;}
}
</style>Ce qui suit est la partie du corps
Les images du carrousel sont généralement accessibles en cliquant, elles sont donc placées dans la balise a
<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>Pour plus de détails sur la programmation contenu, veuillez faire attention à la colonne Introduction à la programmation sur le site Web PHP chinois !
Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!