テキストカルーセルと画像カルーセルも純粋な CSS を使用して実現できることがわかりました。

テキストカルーセルと画像カルーセルを作成するにはどうすればよいですか?皆さんが最初に考えるのはjsを使うかどうかですが、実はテキストカルーセルや画像カルーセルも純粋なCSSでも実現できますので実装方法を見ていきましょう。

#今日は、実際のビジネスで使えるアニメーションテクニックを紹介したいと思います。 [推奨学習:

css ビデオ チュートリアル ]

フレームごとのアニメーションとトゥイーン アニメーションを巧みに使用して、無限ループのカルーセル効果を実現します:

上の図を見て、これは非常に単純な移​​動アニメーションではないのかと尋ねずにはいられない学生もいます。

簡単な分析をしてみましょう。表面的には、要素の

transform:transform:transform() だけが変位しているように見えますが、しかし注意してくださいここには 2 つの問題があります:

• これは無限カルーセル効果です。私たちのアニメーションは、任意の数の要素の無限カルーセル切り替えをサポートする必要があります。

• これはカルーセル Play なので、最後まで実行する場合は、アニメーションを最初の要素までカットする必要があります

この時点で、一時停止して考えることができます。要素が 20 個ある場合、同様のことを行う必要があります。CSS を使用して実装された無限カルーセル ブロードキャスト、どのように実行しますか?

フレームごとのアニメーション制御全体の切り替え

まず最初に、

ステップ イージング機能とも呼ばれるフレームごとのアニメーション効果を使用する必要があります、 を使用します。最初に私の記事を読むことを強くお勧めします。 記事 - CSS アニメーションの詳細な説明。この記事を理解する上で重要な役割を果たします。 それでは、記事の冒頭の例を使用しましょう。このような HTML 構造があるとします:

{
    /* 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);
}

まず、このような単純なレイアウトを実装します:

ここでは、カルーセル効果と任意の数を実現するために、

animation-timing-function:steps():

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

# # を使用できます。 #上記のいくつかの CSS 変数を見てパニックにならないでください。実際には理解するのは簡単です:

calc(var(--speed) * var(--s) )

: 1 つのアニメーションの消費時間* カルーセルの数、つまりアニメーションの合計時間

• steps(var(--s)) コマ送りアニメーションのフレーム数です。ここでは steps(6)

  としています。これがわかりやすいです。

• calc(var(--s) * var (--h) * -1px)) 単一の li コンテナの高さ * カルーセルの数 (実際には ul 全体の高さであり、終了を設定するために使用されます)フレームごとのアニメーションの値

• 上記の効果は実際には次のようになります:

If

overflow: hidden

をコンテナに追加すると、次のような効果が得られます。

このようにして、全体の構造を取得します。少なくとも、全体の効果は周期的です。

ただし、これはフレーム単位のアニメーションなので、切り替えが見えるだけで、各フレーム間のトランジション アニメーション効果はありません。そこで、次にトゥイーン アニメーションを導入する必要があります。 トゥイーン アニメーションを使用して 2 つのデータ セット間の切り替えを実現する

トゥイーン アニメーションを使用して、動的な切り替え効果を実現する必要があります。

このステップは実際には非常に簡単で、

transform

を使用して一連のデータを状態 A から状態 B に移動する必要があります。

デモ用に 1 つだけ取り出した場合、おおよそのコードは次のとおりです:

: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));
  }
}

<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>
  </ul>
</div>

非常に単純なアニメーション:

上記の効果をもとに、冒頭で述べた

コマ送りアニメーション

と トゥイーンアニメーション を組み合わせると、ul の全体の動きが重なり合います。 li の単一の動きを一緒に:

: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);
  }
}

はこのような効果を得ることができます:

##すごい、魔法のような化学反応が起こりました。

フレームごとのアニメーション

と

トゥイーン アニメーションの組み合わせに基づいて、カルーセル効果をほぼ達成しました。

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

以上がテキストカルーセルと画像カルーセルも純粋な CSS を使用して実現できることがわかりました。の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。