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

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

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

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

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

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

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

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

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

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

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

まず最初に、

ステップ イージング機(jī)能とも呼ばれるフレームごとのアニメーション効果を使用する必要があります、 を使用します。最初に私の記事を読むことを強(qiáng)くお?jiǎ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ù)を見(jiàn)てパニックにならないでください。実際には理解するのは簡(jiǎn)単です:

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

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

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

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

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

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

If

overflow: hidden

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

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

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

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

このステップは実際には非常に簡(jiǎn)単で、

transform

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

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

:root {
  // 輪播的個(gè)數(shù)
  --s: 6;
  // 單個(gè) li 容器的高度
  --h: 36;
  // 單次動(dòng)畫(huà)的時(shí)長(zhǎng)
  --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 の全體の動(dòng)きが重なり合います。 li の単一の動(dòng)きを一緒に:

: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)然，有一點(diǎn)瑕疵，可以看到，最后一組數(shù)據(jù)，是從第六組數(shù)據(jù) transform 移動(dòng)向了一組空數(shù)據(jù)：

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

實(shí)際開(kāi)發(fā)過(guò)輪播的同學(xué)肯定知道，這里，其實(shí)也很好處理，我們只需要在末尾，補(bǔ)一組頭部的第一個(gè)數(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ǔ)一個(gè)首條數(shù)據(jù)-->
    <li>Lorem ipsum 1111111</li>
  </ul>
</div>

這樣，我們?cè)倏纯葱Ч?/p>

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

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

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

橫向無(wú)限輪播

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

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

<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ǔ)一個(gè)首尾數(shù)據(jù)-->
    <li>Lorem ipsum 1111111</li>
  </ul>
</div>

整個(gè)動(dòng)畫(huà)的 CSS 代碼基本是一致的，我們只需要改變兩個(gè)動(dòng)畫(huà)的 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，上面的只是文字版的輪播，那如果是圖片呢？

沒(méi)問(wèn)題，方法都是一樣的。基于上述的代碼，我們可以輕松地將它修改一下后得到圖片版的輪播效果。

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

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

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

掌握了這個(gè)技巧之后，你可以將它運(yùn)用在非常多只需要簡(jiǎn)化版的輪播效果之上。

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

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

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

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

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

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

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

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