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

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

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

フレームごとのアニメーションとトゥイーン アニメーションを巧みに使用して、無限ループのカルーセル効果を?qū)g現(xiàn)します:

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

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

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

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

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

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

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

まず最初に、

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

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

まず、このような単純なレイアウトを?qū)g裝します:

ここでは、カルーセル効果と任意の數(shù)を?qū)g現(xiàn)するために、

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 変數(shù)を見てパニックにならないでください。実際には理解するのは簡単です:

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

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

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

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

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

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

If

overflow: hidden

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

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

ただし、これはフレーム単位のアニメーションなので、切り替えが見えるだけで、各フレーム間のトランジション アニメーション効果はありません。そこで、次にトゥイーン アニメーションを?qū)毪工氡匾ⅳ辘蓼埂?トゥイーン アニメーションを使用して 2 つのデータ セット間の切り替えを?qū)g現(xiàn)する

トゥイーン アニメーションを使用して、動的な切り替え効果を?qū)g現(xiàn)する必要があります。

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

transform

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

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

:root {
  // 輪播的個數(shù)
  --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);
  }
}

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

##すごい、魔法のような化學(xué)反応が起こりました。

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

と

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

當(dāng)然，有一點瑕疵，可以看到，最后一組數(shù)據(jù)，是從第六組數(shù)據(jù) transform 移動向了一組空數(shù)據(jù)：

末尾填充頭部第一組數(shù)據(jù)

實際開發(fā)過輪播的同學(xué)肯定知道，這里，其實也很好處理，我們只需要在末尾，補(bǔ)一組頭部的第一個數(shù)據(jù)即可：

改造下我們的 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>
    <!--末尾補(bǔ)一個首條數(shù)據(jù)-->
    <li>Lorem ipsum 1111111</li>
  </ul>
</div>

這樣，我們再看看效果：

Beautiful！如果你還有所疑惑，我們給容器加上 overflow: hidden，實際效果如下，通過額外添加的最后一組數(shù)據(jù)，我們的整個動畫剛好完美的銜接上，一個完美的輪播效果：

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

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

橫向無限輪播

當(dāng)然，實現(xiàn)了豎直方向的輪播，橫向的效果也是一樣的。

并且，我們可以通過在 HTML 結(jié)構(gòu)中，通過 style 內(nèi)填寫 CSS 變量值，傳入實際的 li 個數(shù)，以達(dá)到根據(jù)不同 li 個數(shù)適配不同動畫：

<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>
    <!--末尾補(bǔ)一個首尾數(shù)據(jù)-->
    <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);
  }
}

這樣，我們就輕松的轉(zhuǎn)化為了橫向的效果：

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

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

輪播圖？不在話下

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

沒問題，方法都是一樣的?；谏鲜龅拇a，我們可以輕松地將它修改一下后得到圖片版的輪播效果。

代碼都是一樣的，就不再列出來，直接看看效果：

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

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

掌握了這個技巧之后，你可以將它運用在非常多只需要簡化版的輪播效果之上。

再簡單總結(jié)一下，非常有意思的技巧：

• 利用 逐幀動畫，實現(xiàn)整體的輪播的循環(huán)效果

• 利用 補(bǔ)間動畫，實現(xiàn)具體的 狀態(tài)A 向 狀態(tài)B* 的動畫效果

• 逐幀動畫 配合 補(bǔ)間動畫 構(gòu)成整體輪播的效果

• 通過向 HTML 結(jié)構(gòu)末尾補(bǔ)充一組頭部數(shù)據(jù)，實現(xiàn)整體動畫的銜接

• 通過 HTML 元素的 style 標(biāo)簽，利用 CSS 變量，填入實際的參與循環(huán)的 DOM 個數(shù)，可以實現(xiàn) JavaScript 與 CSS 的打通

（學(xué)習(xí)視頻分享：web前端）

以上がテキストカルーセルと畫像カルーセルも純粋な CSS を使用して実現(xiàn)できることがわかりました。の詳細(xì)內(nèi)容です。詳細(xì)については、PHP 中國語 Web サイトの他の関連記事を參照してください。