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

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

テキストカルーセルと画像カルーセルも純粋な 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 全体の高さであり、終了を設定するために使用されます)フレームごとのアニメーションの値
上記の効果は実際には次のようになります:

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>

ログイン後にコピー

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

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

コマ送りアニメーション

とトゥイーンアニメーションテキストカルーセルと画像カルーセルも純粋な CSS を使用して実現できることがわかりました。を組み合わせると、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);
  }
}

ログイン後にコピー

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