Introduction détaillée à un exemple d'effet carrousel obtenu en utilisant du CSS3 pur

Cet article présente principalement un exemple de réalisation d'un effet carrousel en utilisant du CSS3 pur. L'éditeur pense que c'est plutôt bon, je vais donc le partager avec vous maintenant et le donner comme référence. Suivons l'éditeur pour y jeter un œil

Tout d'abord, regardons la démo, cliquez pour voir la démo

Dites juste quelques mots

La puissance des effets d'animation CSS3 est évidente. Sa popularité n'a pas diminué depuis son émergence. Ses avantages et inconvénients par rapport à l'animation JS ont également fait l'objet de débats dans la communauté front-end. .Il ne fait aucun doute que l'émergence de l'animation CSS3 a réduit dans une certaine mesure l'impact de l'animation CSS3. Elle réduit la difficulté de réaliser des effets d'animation et est propice à l'apprentissage frontal. Sa taille de code rationalisée nous libère du débogage js ennuyeux. Bien entendu, les effets d'animation CSS ont leurs limites. Nous ne pouvons pas simplement utiliser CSS3 pour simuler toutes les animations. Un autre problème est la compatibilité du navigateur. Cette fois, nous utilisons CSS3 pour implémenter un effet carrousel et découvrir la puissance de CSS3. Tout d'abord, nous n'avons implémenté qu'un carrousel automatique, et l'effet est le fondu entrant et sortant le plus courant. Nous n'avons pas implémenté l'effet de rotation des clics. Au moins à mon niveau actuel, je ne peux choisir qu'un carrousel automatique et un clic. rotation en utilisant du CSS3 pur, s'il existe un moyen d'obtenir les deux effets en même temps, dites-le-moi.

2. Mise en page

<section class="slider-contaner">
    <ul class="slider">
        <li class="slider-item slider-item1"></li>
        <li class="slider-item slider-item2"></li>
        <li class="slider-item slider-item3"></li>
        <li class="slider-item slider-item4"></li>
        <li class="slider-item slider-item5"></li>
    </ul>
</section>

Il n'y a rien à dire sur le code html. la grande case du curseur doit être positionnée de manière relative, de plus, nous utilisons background-image dans la balise li, car de cette façon, il est possible d'utiliser du CSS pur pour obtenir une réactivité. De plus, afin de voir clairement l'image complète dans. la réactivité, l'image d'arrière-plan doit utiliser background-size:100%, et l'autre est la hauteur. Le problème est que le conteneur du curseur doit évidemment être cohérent avec la hauteur de li, car la hauteur ne peut pas être fixée dans le style réactif, donc utiliser l'attribut height n'est évidemment pas possible. L'attribut padding peut résoudre ce problème. Premièrement, l'image d'arrière-plan peut être affichée dans le padding, la seconde est que l'unité de% dans padding est basée sur la largeur du parent. élément.

*{
      margin:0;
      padding:0;
}
ul,li{
      list-style: none;
}
.floatfix {
      *zoom: 1;
}
.floatfix:after {
      content: "";
      display: table;
      clear: both;
}
.slider-contaner{
      width:100%;
      position:relative;
}
.slider,.slider-item{
      padding-bottom:40%;
}
.slider-item{
      width:100%;
      position:absolute;
      background-size:100%;
}
.slider-item1{
      background-image:url(imgs/1.jpg);
}
.slider-item2{
      background-image:url(imgs/2.jpg);
}
.slider-item3{
      background-image:url(imgs/3.jpg);
}
.slider-item4{
      background-image:url(imgs/4.jpg);
}
.slider-item5{
      background-image:url(imgs/5.jpg);
}

3. Animation de conception

L'effet de fondu d'entrée et de sortie doit utiliser l'opacité. -in et fade-out de toutes les images sont dans leur ensemble la même animation, mais le temps est différent. Cela doit être contrôlé par animation-delay. La rotation infinie de l'animation doit utiliser animation-iteration-count: infinite. 5 images cette fois. L'animation entière est divisée en deux parties : image restante et fondu d'entrée et de sortie. Cet effet est représenté par la figure ci-dessous, et la flèche indique le processus de fondu d'entrée et de sortie.

Parce qu'il n'y a aucun attribut dans CSS3 qui spécifie l'intervalle de temps entre deux animations, nous devons donc écrire l'effet de l'image lorsque d'autres images apparaissent et disparaissent dans l'animation .Évidemment À l'heure actuelle, c'est l'opacité : 0 ; pour la commodité de l'écriture de l'animation, nous utilisons une fonction linéaire pour l'animation, c'est-à-dire une fonction de synchronisation d'animation : l'ensemble du processus prend 20 secondes, un séjour prend 3 secondes et un fondu d'entrée et de sortie prend 1 seconde, ce qui est converti en pourcentage, soit 15 % et 5 %

@keyframes fade{
0%{
      opacity:0;
      z-index:2;
}
5%{
      opacity:1;
      z-index: 1;
}
20%{
      opacity:1;
      z-index:1;
}
25%{
      opacity:0;
      z-index:0;
}
100%{
      opacity:0;
      z-index:0;
}
}

L'étape suivante consiste à ajouter. retard d'animation sur chaque image, car la première image doit être affichée à l'avant, donc l'autre. En utilisant opacity:0 via le sélecteur frère adjacent, la première image n'a pas besoin de fondre en avant et en arrière et passe directement à l'arrêt, ce qui est de 5 %, donc le délai d'animation est de -1 s, et l'image du deuxième chapitre est à 20 % de la première image, soit 4 s, le délai d'animation est de 3 s, et ainsi de suite

.slider-item + .slider-item{
      opacity:0;
}
.slider-item1{
      animation-delay: -1s;
}
.slider-item2{
      animation-delay: 3s;
}
.slider-item3{
      animation-delay: 7s;
}
.slider-item4{
      animation-delay: 11s;
}
.slider-item5{
      animation-delay: 15s;
}

À ce stade, notre image de carrousel peut être déplacée

4.Ajouter le focus du carrousel

Ajout d'un carrousel. le focus n'est bien sûr pas pour les clics, mais pour indiquer aux visiteurs combien d'images il y a et la position actuelle de l'image, du moins pour moi personnellement. Pour moi, le focus du carrousel est très important, car si je ne sais pas comment de nombreuses images sont dans le carrousel et je ne peux pas cliquer dessus, je serai très mal à l'aise et j'aurai l'impression de n'avoir pas vu toute la page. Ajoutons donc le focus carrousel. Tout d'abord, il est très clair que l'animation ci-dessus peut toujours être utilisée. De plus, la mise en page doit utiliser position: absolue. De plus, il est évident qu'il faut écrire le focus deux fois, une fois pour le style de l'image actuelle. , et une fois pour le style de l'image non actuelle

<p class="focus-container">
<ul class="floatfix"> 
<li><p class="focus-item focus-item1"></p></li>
<li><p class="focus-item focus-item2"></p></li>
<li><p class="focus-item focus-item3"></p></li>
<li><p class="focus-item focus-item4"></p></li>
<li><p class="focus-item focus-item5"></p></li>
</ul>
</p>

.focus-container{
      position:absolute;
      bottom:2%;
      z-index:7;
      margin:0 auto;
      left:0;
      right:0;
}
.focus-container ul{
      margin-left:46%;
}
.focus-container li{
      width:10px;
      height:10px;
      border-radius:50%;
      float:left;
      margin-right:10px;
      background:#fff;
}
.focus-item{
      width:100%;
      height:100%;
      background:#51B1D9;
      border-radius:inherit;
      animation-duration: 20s;
      animation-timing-function: linear;
      animation-name:fade;
      animation-iteration-count: infinite;
}
.focus-item1{
      animation-delay: -1s;
}
.focus-item2{
      animation-delay: 3s;
}
.focus-item3{
      animation-delay: 7s;
}
.focus-item4{
      animation-delay: 11s;
}
.focus-item5{
      animation-delay: 15s;
}

Peignage du code

Si vous avez maintenu le code d'autres personnes, vous saurez que le peignage de code Concernant l'importance de la post-maintenance, le code css qui n'a pas été trié peut être écrit où vous voulez. C'est tout simplement un désastre pour la publication. -maintenance. Lors du tri du code CSS, je pense personnellement que vous devez d'abord ajouter les commentaires nécessaires et partitionner le code CSS. L'autre chose est de minimiser les endroits qui doivent être modifiés plus tard. J'ai déjà pris en compte ce problème lors de l'écriture du code, la tâche principale est donc d'ajouter des commentaires et d'indiquer aux responsables les endroits les plus fréquemment modifiés dans le code. Nous suivons le principe de mettre le code le plus fréquemment modifié en dernier.

我们来分析一下我们的代码如果给别人用可能需要修改的地方，首先肯定是图片路径，所以我们把这个样式放在最后，然后是图片高度，轮播焦点的颜色，动画时间的设置（这里还涉及图片个数），轮播焦点的位置，当然轮播焦点大小也可能修改。重构后代码如下：

<p class="focus-container">
<ul class="floatfix"> 
<li><p class="focus-item focus-item1"></p></li>
<li><p class="focus-item focus-item2"></p></li>
<li><p class="focus-item focus-item3"></p></li>
<li><p class="focus-item focus-item4"></p></li>
<li><p class="focus-item focus-item5"></p></li>
</ul>
</p>

/*css reset start*/
*{
margin:0;
padding:0;
}
ul,li{
list-style: none;
}
/*css reset end*/

/*css public start*/
.floatfix {
*zoom: 1;
}
.floatfix:after {
content: "";
display: table;
clear: both;
}
/*css public end*/

/*slider start*/
.slider-contaner{
width:100%;
position:relative;
}
.slider-item + .slider-item{
opacity:0;
}
.slider-item{
width:100%;
position:absolute;
animation-timing-function: linear;
animation-name:fade;
animation-iteration-count: infinite;
background-size:100%;
}
.focus-container{
position:absolute;
z-index:7;
margin:0 auto;
left:0;
right:0;
}
.focus-container li{
width:10px;
height:10px;
border-radius:50%;
float:left;
margin-right:10px;
background:#fff;
}
.focus-item{
width:100%;
height:100%;
border-radius:inherit;
animation-timing-function: linear;
animation-name:fade;
animation-iteration-count: infinite;
}
.focus-item2,.focus-item3,.focus-item4,.focus-item5{
opacity:0;
}
.focus-container ul{
margin-left:46%;
}
/*设置轮播焦点的位置*/
.focus-container{
bottom:2%;
}
/*设置当前图片焦点的颜色*/
.focus-item{
background:#51B1D9;
}
/*设置动画，请根据实际需要修改秒数*/
.slider-item,.focus-item{
animation-duration: 20s;
}
.slider-item1,.focus-item1{
animation-delay: -1s;
}
.slider-item2,.focus-item2{
animation-delay: 3s;
}
.slider-item3,.focus-item3{
animation-delay: 7s;
}
.slider-item4,.focus-item4{
animation-delay: 11s;
}
.slider-item5,.focus-item5{
animation-delay: 15s;
}
@keyframes fade{
0%{
opacity:0;
z-index:2;
}
5%{
opacity:1;
z-index: 1;
}
20%{
opacity:1;
z-index:1;
}
25%{
opacity:0;
z-index:0;
}
100%{
opacity:0;
z-index:0;
}
}
/*设置背景，响应式请利用媒体查询根据断点修改路径*/
.slider-item1{
background-image:url(imgs/1.jpg);
}
.slider-item2{
background-image:url(imgs/2.jpg);
}
.slider-item3{
background-image:url(imgs/3.jpg);
}
.slider-item4{
background-image:url(imgs/4.jpg);
}
.slider-item5{
background-image:url(imgs/5.jpg);
}
/*设置图片的高度，请根据具体需要修改百分比，响应式及时修改此值*/
.slider,.slider-item{
padding-bottom:40%;
}

六、最后扯两句

这种css3实现的轮播图，缺点也是不言而喻，点击轮换和自动轮换两者只能选其一，不过自动轮换可以用在手机端，这是一个不错的选择，另外，现在的网站大都是通栏设计，网页文字很少，尤其是网站首页更是如此，有时候比的不是网站设计的优劣，反而是谁选的图片好看，谁就有可能受到青睐，这种情况我们其实可以考虑将轮播图变为背景的轮换，这时候轮播焦点也就可以不使用了，相信你的博客首页或者产品首页使用背景轮换，效果会非常不错的。  

【相关推荐】

1. 免费css在线视频教程

2. css在线手册

3. php.cn独孤九贱（2）－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!