집 > 기사 > 웹 프론트엔드 > 텍스트 캐러셀과 이미지 캐러셀도 순수 CSS를 사용하여 구현할 수 있다는 것이 밝혀졌습니다!

텍스트 캐러셀과 이미지 캐러셀도 순수 CSS를 사용하여 구현할 수 있다는 것이 밝혀졌습니다!

青灯夜游앞으로: 2022-06-10 13:00:594247검색

텍스트 회전판과 그림 회전판을 만드는 방법은 무엇입니까? 누구나 가장 먼저 생각하는 것은 js를 사용할지 여부입니다. 실제로 순수 CSS를 사용하여 구현하는 방법도 모두에게 도움이 되기를 바랍니다.

오늘은 실제 비즈니스에서 활용할 수 있는 애니메이션 기법을 공유해보겠습니다. [추천 학습: css 비디오 튜토리얼]

프레임별 애니메이션과 트윈 애니메이션을 스마트하게 사용하여 무한 루프 캐러셀 효과를 구현합니다. 다음과 같습니다.

위 다이어그램을 보면 거기에 학생들이 묻지 않을 수 없군요. 아주 단순한 변위 애니메이션 아닌가요?

간단히 분석해 보겠습니다. 표면적으로는 요소의 transform:translate()만 대체되는 것 같습니다. 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，就是这样的效果：

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

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

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

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

这一步，其实也非常简单，我们要做的，就是将一组数据，利用 transform하지만 주의하세요

. 여기에는 두 가지 어려움이 있습니다.

이것은 무한 캐러셀 효과입니다. 우리 애니메이션은 모든 요소의 무한 캐러셀 전환을 지원해야 합니다
캐러셀이므로 마지막까지 실행할 때 애니메이션을 첫 번째 요소까지 잘라내야 합니다

이때 잠시 멈춰서 요소가 20개라면 생각해 보세요. , 유사한 무한 캐러셀 브로드캐스트가 필요합니다. CSS를 사용하면 어떻게 하시겠습니까? 텍스트 캐러셀과 이미지 캐러셀도 순수 CSS를 사용하여 구현할 수 있다는 것이 밝혀졌습니다!

프레임별 애니메이션 제어 전체 전환

우선

를 사용하여 단계 이징 기능<p>으로도 알려진 프레임별 애니메이션 효과를 사용해야 합니다. animation-timing-function code>, 단계, 구문은 다음과 같습니다. <strong><pre class="brush:js;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> <code>단계

구문에 특별히 익숙하지 않은 경우 먼저 내 기사를 읽어 보시기 바랍니다. - CSS 애니메이션에 대한 간단한 설명은 이 글을 이해하는 데 매우 유용합니다. 글의 시작 부분에 있는 예제를 사용하겠습니다. 다음과 같은 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);
  }
}

먼저 다음과 같은 간단한 레이아웃을 구현합니다.

여기서 캐러셀 효과를 얻으려면 , 숫자에 관계없이 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));
  }
}

위의 여러 CSS 변수를 보면 당황하지 마세요. 실제로 이해하기 쉽습니다.

calc(var(--speed) * var(--s)): 단일 애니메이션의 시간 소비* Carousel 숫자, 즉 총 애니메이션 기간

steps(var(--s))은 프레임별 애니메이션의 프레임 수입니다. 여기서는 단계( 6)이며 이해하기 쉽습니다🎜

🎜

calc(var(--s) * var(--h) * -1px)) code> 단일 li 컨테이너 높이 * 캐러셀 수는 실제로 프레임별 애니메이션의 끝점 값을 설정하는 데 사용되는 ul의 전체 높이입니다🎜

🎜위 효과 실제로는 다음과 같습니다.🎜🎜🎜

🎜🎜🎜 컨테이너에 overflow:hidden을 추가하면 다음과 같은 효과가 나타납니다. 🎜🎜🎜

🎜🎜🎜이런 방식으로 우리는 전체적인 구조를 얻으려면 적어도 전체 효과는 순환적입니다. 🎜🎜하지만 프레임별 애니메이션이기 때문에 전환만 볼 수 있을 뿐 각 프레임 간 전환 애니메이션 효과는 없습니다. 그럼 다음으로 트위닝 애니메이션을 소개하겠습니다. 🎜

트위닝 애니메이션을 사용하여 두 데이터 세트 간 전환

🎜동적인 전환 효과를 얻으려면 트위닝 애니메이션을 사용해야 합니다. 🎜🎜이 단계는 실제로 매우 간단합니다. 우리가 해야 할 일은 transform을 사용하여 데이터 세트를 A 상태에서 B 상태로 이동하는 것입니다. 🎜🎜시연용으로 하나만 꺼내면 대략적인 코드는 다음과 같습니다. 🎜

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

🎜아주 간단한 애니메이션: 🎜🎜🎜🎜🎜🎜🎜위 효과를 바탕으로 🎜프레임별 애니메이션을 결합하면 🎜 처음과 여기에서 언급한 이 🎜트윈 애니메이션🎜을 결합하면 ul의 전체 움직임이 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);
  }
}

🎜는 다음과 같은 효과를 얻을 수 있습니다. 🎜🎜🎜🎜🎜🎜🎜와우, 마법의 화학 반응 발생했습니다! 🎜프레임별 애니메이션🎜과 🎜트위닝된 애니메이션🎜을 결합하여 거의 캐러셀 효과를 구현했습니다. 🎜

当然，有一点瑕疵，可以看到，最后一组数据，是从第六组数据 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>
  <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>

整个动画的 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前端）

위 내용은 텍스트 캐러셀과 이미지 캐러셀도 순수 CSS를 사용하여 구현할 수 있다는 것이 밝혀졌습니다!의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

JavaScript css html 循环 var JS function dom overflow transform animation ul li

성명：

이 기사는 segmentfault.com에서 복제됩니다. 침해가 있는 경우 admin@php.cn으로 문의하시기 바랍니다. 삭제

이전 기사：[토혈 요약] 20가지 이상의 실용적인 프론트엔드 도구를 즐겨찾기에 추가하세요!다음 기사：[토혈 요약] 20가지 이상의 실용적인 프론트엔드 도구를 즐겨찾기에 추가하세요!