Maison > Article > interface Web > Comment utiliser du CSS3 pur pour obtenir l'effet d'un carrousel d'images

Comment utiliser du CSS3 pur pour obtenir l'effet d'un carrousel d'images

不言original: 2018-08-22 14:56:154264parcourir

Le contenu de cet article explique comment utiliser du CSS3 pur pour obtenir l'effet de carrousel d'images. Il a une certaine valeur de référence. Les amis dans le besoin peuvent s'y référer.

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<style type="text/css">
*{ 
    margin: 0;
    padding: 0; 
    text-decoration: none;
}
ul{
    list-style: none;
}
ul li{
    width: 400px;
    height:200px;
}
#container{
    position: relative;
    width: 400px;
    height: 200px;
    overflow: hidden;/*隐藏溢出的图片*/
}
.pic{
    width:1600px;/*4张图的宽度*/
    position: absolute;/*基于父容器进行定位*/
    left:0;
    animation-name: carousel;
    animation-duration: 12s;
    animation-iteration-count: infinite;/*//动画调用可以简写*/
}
@keyframes carousel {
    0%,30%{
        left: 0;
    }
    35%,65%{
        left: -400px;
    }
    70%,99%{
        left: -800px;
    }
    100%{
        left: -1200px;
    }   
}
.pic li{
    float: left;
    background: #5dd94e;
}
.pic li img {
    width: 400px;
    height: 200px;
}
</style>
<body>
<p id="container">
    <ul class="pic">
        <li><a href="javascript:;">111</a></li>
        <li><a href="javascript:;">222</a></li>
        <li><a href="javascript:;">333</a></li>
        <li><a href="javascript:;">111</a></li><!-- 克隆第一张 -->
    </ul>        
</p>   
</body>
</html>

Recommandations associées :

Comment faire pivoter les images en continu en CSS3 ? [Explication détaillée]

Comment utiliser CSS pour définir la couleur d'arrière-plan du texte ? Explication détaillée du code couleur d'arrière-plan CSS

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!

Déclaration：

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Article précédent：Comment utiliser du CSS pur pour implémenter l'effet d'animation du chargeur d'une voiture de course (code ci-joint)Article suivant：Comment utiliser du CSS pur pour implémenter l'effet d'animation du chargeur d'une voiture de course (code ci-joint)

Articles Liés

Voir plus