Il s'avère que le carrousel de texte et le carrousel d'images peuvent également être réalisés en utilisant du CSS pur !

Comment créer un carrousel de texte et un carrousel d'images ? La première chose à laquelle tout le monde pense est de savoir s'il faut utiliser js. En fait, le carrousel de texte et le carrousel d'images peuvent également être réalisés en utilisant du CSS pur. Jetons un coup d'œil à la méthode d'implémentation.

Aujourd'hui, je vais partager une technique d'animation qui peut être utilisée dans une entreprise réelle. [Apprentissage recommandé : Tutoriel vidéo CSS]

Utilisation intelligente de l'animation image par image et de l'animation interpolée pour obtenir un effet carrousel en boucle infinie, comme ceci :

En voyant le diagramme ci-dessus, là Les étudiants ne peuvent s'empêcher de demander : n'est-ce pas une animation de déplacement très simple ?

Faisons une analyse simple. En apparence, il semble que seul le transform: translate() de l'élément soit déplacé, transform: translate() 在位移，但是注意，这里有两个难点：

• 这是个无限轮播的效果，我们的动画需要支持任意多个元素的无限轮播切换

• 因为是轮播，所以，运行到最后一个的时候，需要动画切到第一个元素

到这里，你可以暂停思考一下，如果有 20 个元素，需要进行类似的无限轮播播报，使用 CSS 实现，你会怎么去做呢？

逐帧动画控制整体切换

首先，我需要利用到逐帧动画效果，也被称为步骤缓动函数，利用的是 animation-timing-function 中，的 steps，语法如下：

{
    /* Keyword values */
    animation-timing-function: step-start;
    animation-timing-function: step-end;
    /* Function values */
    animation-timing-function: steps(6, start)
    animation-timing-function: steps(4, end);
}

如果你对 steps 的语法还不是特别了解，强烈建议你先看看我的这篇文章 -- 深入浅出 CSS 动画，它对理解本文起着至关重要的作用。

好的，还是文章以开头的例子，假设我们存在这样 HTML 结构：

<div class="g-container">
  <ul>
    <li>Lorem ipsum 1111111</li>
    <li>Lorem ipsum 2222222</li>
    <li>Lorem ipsum 3333333</li>
    <li>Lorem ipsum 4444444</li>
    <li>Lorem ipsum 5555555</li>
    <li>Lorem ipsum 6666666</li>
  </ul>
</div>

首先，我们实现这样一个简单的布局：

在这里，要实现轮播效果，并且是任意个数，我们可以借助 animation-timing-function: steps()：

:root {
  // 轮播的个数
  --s: 6;
  // 单个 li 容器的高度
  --h: 36;
  // 单次动画的时长
  --speed: 1.5s;
}
.g-container {
  width: 300px;
  height: calc(var(--h) * 1px);
}
ul {
  display: flex;
  flex-direction: column;
  animation: move calc(var(--speed) * var(--s)) steps(var(--s)) infinite;
}
ul li {
  width: 100%;
}
@keyframes move {
  0% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(0, calc(var(--s) * var(--h) * -1px));
  }
}

别看到上述有几个 CSS 变量就慌了，其实很好理解：

• calc(var(--speed) * var(--s))：单次动画的耗时 * 轮播的个数，也就是总动画时长

• steps(var(--s)) 就是逐帧动画的帧数，这里也就是 steps(6)，很好理解

• calc(var(--s) * var(--h) * -1px)) 单个 li 容器的高度 * 轮播的个数，其实就是 ul 的总体高度，用于设置逐帧动画的终点值

上述的效果，实际如下：

如果给容器添加上 overflow: hidden，就是这样的效果：

这样，我们就得到了整体的结构，至少，整个效果是循环的。

但是由于只是逐帧动画，所以只能看到切换，但是每一帧之间，没有过渡动画效果。所以，接下来，我们还得引入补间动画。

利用补间动画实现两组数据间的切换

我们需要利用补间动画，实现动态的切换效果。

这一步，其实也非常简单，我们要做的，就是将一组数据，利用 transformMais faites attention

, il y a ici deux difficultés :

• Il s'agit d'un effet de carrousel infini. Notre animation doit prendre en charge la commutation de carrousel infinie d'un nombre illimité d'éléments

• Parce que c'est le cas. est un carrousel, par conséquent, lors de l'exécution du dernier, l'animation doit être coupée au premier élément

À ce stade, vous pouvez faire une pause et y réfléchir s'il y a 20 éléments. , une diffusion carrousel infinie similaire est nécessaire, en utilisant CSS, comment procéderiez-vous ?

Commutation globale du contrôle de l'animation image par image

Tout d'abord, je dois utiliser l'effet d'animation image par image, également connu sous le nom de

fonction d'assouplissement par étapes

, en utilisant le animation-timing-function</ code>, les étapes, la syntaxe est la suivante : <strong><pre class='brush:php;toolbar:false;'>&lt;div class=&quot;g-container&quot;&gt; &lt;ul style=&quot;--s: 6&quot;&gt; &lt;li&gt;Lorem ipsum 1111111&lt;/li&gt; &lt;li&gt;Lorem ipsum 2222222&lt;/li&gt; &lt;li&gt;Lorem ipsum 3333333&lt;/li&gt; &lt;li&gt;Lorem ipsum 4444444&lt;/li&gt; &lt;li&gt;Lorem ipsum 5555555&lt;/li&gt; &lt;li&gt;Lorem ipsum 6666666&lt;/li&gt; &lt;/ul&gt; &lt;/div&gt;</pre></strong>Si vous n'êtes pas particulièrement familier avec la syntaxe des <code>étapes, je vous recommande fortement de lire mon article en premier - une explication simple de l'animation CSS, très utile pour comprendre que cet article joue un rôle essentiel. D'accord, utilisons l'exemple au début de l'article. Supposons que nous ayons cette structure HTML :

:root {
  --h: 36;
  --speed: 1.2s;
}
ul li {
  height: 36px;
  animation: liMove calc(var(--speed)) infinite;
}
@keyframes liMove {
  0% {
    transform: translate(0, 0);
  }
  80%,
  100%  {
    transform: translate(0, -36px);
  }
}

Tout d'abord, nous implémentons une mise en page aussi simple :

Ici, pour obtenir l'effet carrousel , Et c'est n'importe quel nombre, nous pouvons utiliser animation-timing-function: steps() :

:root {
  // 轮播的个数
  --s: 6;
  // 单个 li 容器的高度
  --h: 36;
  // 单次动画的时长
  --speed: 1.5s;
}
.g-container {
  width: 300px;
  height: calc(var(--h) * 1px);
}
ul {
  display: flex;
  flex-direction: column;
  animation: move calc(var(--speed) * var(--s)) steps(var(--s)) infinite;
}
ul li {
  width: 100%;
  animation: liMove calc(var(--speed)) infinite;
}
@keyframes move {
  0% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(0, calc(var(--s) * var(--h) * -1px));
  }
}
@keyframes liMove {
  0% {
    transform: translate(0, 0);
  }
  80%,
  100%  {
    transform: translate(0, calc(var(--h) * -1px));
  }
}

Ne paniquez pas quand vous voyez les plusieurs variables CSS ci-dessus, c'est en fait facile à comprendre : < ul style="list-style-type: disc;">

calc(var(--speed) * var(--s)) : Consommation de temps d'une seule animation* Carrousel Le nombre, c'est-à-dire la durée totale de l'animation

steps(var(--s)) est le nombre d'images de l'animation image par image, ici est steps( 6), facile à comprendre🎜

🎜calc(var(--s) * var(--h) * -1px))</ code> pour un seul conteneur li Hauteur * Le nombre de carrousels est en fait la hauteur totale de ul, qui est utilisée pour définir la valeur du point final de l'animation image par image🎜</li></ul>🎜L'effet ci-dessus est en fait le suivant :🎜🎜🎜<img class="lazy " referrerpolicy="no-referrer" src="https://img.php.cn/upload/article/000/000/024/c34b75c6e1124174fd23f5fa98b69af7-4.gif " alt="" title=""/>🎜🎜🎜 Si vous ajoutez <code>overflow: caché au conteneur, voici l'effet : 🎜🎜🎜🎜🎜🎜De cette façon, nous obtenez la structure globale, au moins, tout l'effet est cyclique. 🎜🎜Mais comme il ne s'agit que d'une animation image par image, vous ne pouvez voir que le changement, mais il n'y a pas d'effet d'animation de transition entre chaque image. Nous devons donc ensuite introduire l’animation d’interpolation. 🎜

Utilisez l'animation d'interpolation pour basculer entre deux ensembles de données

🎜Nous devons utiliser l'animation d'interpolation pour obtenir un effet de commutation dynamique. 🎜🎜Cette étape est en fait très simple. Ce que nous devons faire est d'utiliser transform pour déplacer un ensemble de données de l'état A à l'état B. 🎜🎜Si vous en retirez un pour une démonstration seule, le code approximatif est le suivant : 🎜

<div class="g-container">
  <ul>
    <li>Lorem ipsum 1111111</li>
    <li>Lorem ipsum 2222222</li>
    <li>Lorem ipsum 3333333</li>
    <li>Lorem ipsum 4444444</li>
    <li>Lorem ipsum 5555555</li>
    <li>Lorem ipsum 6666666</li>
    <!--末尾补一个首条数据-->
    <li>Lorem ipsum 1111111</li>
  </ul>
</div>

<div class="g-container">
  <ul style="--s: 6">
    <li>Lorem ipsum 1111111</li>
    <li>Lorem ipsum 2222222</li>
    <li>Lorem ipsum 3333333</li>
    <li>Lorem ipsum 4444444</li>
    <li>Lorem ipsum 5555555</li>
    <li>Lorem ipsum 6666666</li>
    <!--末尾补一个首尾数据-->
    <li>Lorem ipsum 1111111</li>
  </ul>
</div>

🎜Une animation très simple : 🎜🎜🎜🎜🎜🎜🎜Basé sur les effets ci-dessus, si l'on combine l'animation 🎜image par image 🎜 mentionné au début et ici En combinant cette 🎜animation inter🎜, le mouvement global de ul se superpose au mouvement unique de li : 🎜

:root {
  --w: 300;
  --speed: 1.5s;
}
.g-container {
  width: calc(--w * 1px);
  overflow: hidden;
}
ul {
  display: flex;
  flex-wrap: nowrap;
   animation: move calc(var(--speed) * var(--s)) steps(var(--s)) infinite;
}
ul li {
  flex-shrink: 0;
  width: 100%;
  height: 100%;
  animation: liMove calc(var(--speed)) infinite;
}
@keyframes move {
  0% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(calc(var(--s) * var(--w) * -1px), 0);
  }
}
@keyframes liMove {
  0% {
    transform: translate(0, 0);
  }
  80%,
  100%  {
    transform: translate(calc(var(--w) * -1px), 0);
  }
}

🎜 peut obtenir un tel effet : 🎜🎜🎜🎜🎜🎜🎜Wow, un produit chimique magique la réaction s'est produite ! Basé sur la combinaison de l'🎜animation image par image🎜 et de l'🎜animation interpolée🎜, nous avons presque obtenu un effet carrousel. 🎜

当然，有一点瑕疵，可以看到，最后一组数据，是从第六组数据 transform 移动向了一组空数据：

末尾填充头部第一组数据

实际开发过轮播的同学肯定知道，这里，其实也很好处理，我们只需要在末尾，补一组头部的第一个数据即可：

改造下我们的 HTML：

<div class="g-container">
  <ul>
    <li>Lorem ipsum 1111111</li>
    <li>Lorem ipsum 2222222</li>
    <li>Lorem ipsum 3333333</li>
    <li>Lorem ipsum 4444444</li>
    <li>Lorem ipsum 5555555</li>
    <li>Lorem ipsum 6666666</li>
    <!--末尾补一个首条数据-->
    <li>Lorem ipsum 1111111</li>
  </ul>
</div>

这样，我们再看看效果：

Beautiful！如果你还有所疑惑，我们给容器加上 overflow: hidden，实际效果如下，通过额外添加的最后一组数据，我们的整个动画刚好完美的衔接上，一个完美的轮播效果：

完整的代码，你可以戳这里：CodePen Demo -- Vertical Infinity Loop

https://codepen.io/Chokcoco/pen/RwQVByx

横向无限轮播

当然，实现了竖直方向的轮播，横向的效果也是一样的。

并且，我们可以通过在 HTML 结构中，通过 style 内填写 CSS 变量值，传入实际的 li 个数，以达到根据不同 li 个数适配不同动画：

<div class="g-container">
  <ul style="--s: 6">
    <li>Lorem ipsum 1111111</li>
    <li>Lorem ipsum 2222222</li>
    <li>Lorem ipsum 3333333</li>
    <li>Lorem ipsum 4444444</li>
    <li>Lorem ipsum 5555555</li>
    <li>Lorem ipsum 6666666</li>
    <!--末尾补一个首尾数据-->
    <li>Lorem ipsum 1111111</li>
  </ul>
</div>

整个动画的 CSS 代码基本是一致的，我们只需要改变两个动画的 transform 值，从竖直位移，改成水平位移即可：

:root {
  --w: 300;
  --speed: 1.5s;
}
.g-container {
  width: calc(--w * 1px);
  overflow: hidden;
}
ul {
  display: flex;
  flex-wrap: nowrap;
   animation: move calc(var(--speed) * var(--s)) steps(var(--s)) infinite;
}
ul li {
  flex-shrink: 0;
  width: 100%;
  height: 100%;
  animation: liMove calc(var(--speed)) infinite;
}
@keyframes move {
  0% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(calc(var(--s) * var(--w) * -1px), 0);
  }
}
@keyframes liMove {
  0% {
    transform: translate(0, 0);
  }
  80%,
  100%  {
    transform: translate(calc(var(--w) * -1px), 0);
  }
}

这样，我们就轻松的转化为了横向的效果：

完整的代码，你可以戳这里：CodePen Demo -- Horizontal Infinity Loop

https://codepen.io/Chokcoco/pen/JjpNBXY

轮播图？不在话下

OK，上面的只是文字版的轮播，那如果是图片呢？

没问题，方法都是一样的。基于上述的代码，我们可以轻松地将它修改一下后得到图片版的轮播效果。

代码都是一样的，就不再列出来，直接看看效果：

完整的代码，你可以戳这里：CodePen Demo -- Horizontal Image Infinity Loop

https://codepen.io/Chokcoco/pen/GRQvqgq

掌握了这个技巧之后，你可以将它运用在非常多只需要简化版的轮播效果之上。

再简单总结一下，非常有意思的技巧：

• 利用 逐帧动画，实现整体的轮播的循环效果

• 利用 补间动画，实现具体的 状态A 向 状态B* 的动画效果

• 逐帧动画 配合 补间动画 构成整体轮播的效果

• 通过向 HTML 结构末尾补充一组头部数据，实现整体动画的衔接

• 通过 HTML 元素的 style 标签，利用 CSS 变量，填入实际的参与循环的 DOM 个数，可以实现 JavaScript 与 CSS 的打通

（学习视频分享：web前端）

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!