Bagaimana untuk mencipta karusel teks dan karusel imej? Perkara pertama yang semua orang fikirkan ialah sama ada untuk menggunakan js Malah, karusel teks dan karusel imej juga boleh direalisasikan menggunakan CSS tulen. Saya harap ia akan membantu semua orang.

Hari ini, saya ingin berkongsi satu teknik animasi yang boleh digunakan dalam perniagaan sebenar. [Pembelajaran yang disyorkan: tutorial video css]

Mahir menggunakan animasi bingkai demi bingkai dan animasi tween untuk mencapai kesan karusel gelung tak terhingga, seperti ini:

Melihat gambarajah di atas, beberapa pelajar tidak dapat mengelak daripada bertanya, bukankah ini animasi anjakan yang sangat mudah?

Mari kita buat analisis mudah Pada zahirnya, nampaknya hanya transform: translate() elemen yang beralih, tetapi perhatikan , terdapat dua kesukaran di sini:

<. . yang terakhir apabila anda perlu menghidupkan untuk memotong elemen pertama style="list-style-type: disc;">

di sini, anda boleh menjeda dan memikirkannya Jika terdapat 20 elemen, anda perlu melakukan siaran karusel tak terhingga yang serupa . Gunakan CSS untuk melaksanakannya, bagaimana anda melakukannya?

Animasi bingkai demi bingkai mengawal pensuisan keseluruhan

Pertama sekali, saya perlu menggunakan kesan animasi bingkai demi bingkai, juga dikenali sebagai

fungsi pelonggaran langkah, yang menggunakan

, langkah-langkahnya, sintaksnya adalah seperti berikut:

Jika anda tidak tahu banyak tentang sintaks

, saya amat mengesyorkan anda membaca artikel ini saya dahulukan - Penjelasan ringkas tentang animasi CSS, yang membantu untuk memahami Artikel ini memainkan peranan penting. Baiklah, mari kita berpegang pada contoh pada permulaan artikel Katakan kita mempunyai struktur HTML ini: animation-timing-function

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

Pertama, kami melaksanakan susun atur yang begitu mudah:

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>

Di sini, untuk mencapai kesan karusel dan sebarang nombor, kita boleh menggunakan

:

Jangan lihat berapa banyak di atas Ia mengelirukan untuk menggunakan pembolehubah CSS, tetapi ia sebenarnya mudah difahami:

animation-timing-function: steps(): penggunaan masa animasi tunggal * bilangan karusel, iaitu, jumlah tempoh animasi

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

ialah bilangan bingkai animasi bingkai demi bingkai, berikut ialah
• , yang mudah difahami

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

  Ketinggian bekas li tunggal* Bilangan karusel sebenarnya ialah ketinggian keseluruhan ul, yang digunakan untuk menetapkan nilai akhir animasi bingkai demi bingkai

• steps(var(--s))Kesan di atas sebenarnya seperti berikut: steps(6)

• calc(var(--s) * var(--h) * -1px))

  Jika anda menambah
pada bekas, ini adalah kesannya:

Dengan cara ini, kita Struktur keseluruhan diperolehi Sekurang-kurangnya, keseluruhan kesan adalah bulat.

Tetapi memandangkan ia hanya animasi bingkai demi bingkai, anda hanya boleh melihat penukaran, tetapi tiada kesan animasi peralihan antara setiap bingkai. Jadi, seterusnya, kita perlu memperkenalkan animasi tweening. overflow: hidden

Gunakan animasi tweening untuk bertukar antara dua set data

Kita perlu menggunakan animasi tweening untuk mencapai kesan penukaran dinamik. Langkah ini sebenarnya sangat mudah. ??Apa yang perlu kita lakukan ialah menggunakan

untuk memindahkan satu set data dari keadaan A ke keadaan B.

Jika anda mengambil satu untuk demonstrasi sahaja, kod anggarannya adalah seperti berikut:

Animasi yang sangat mudah:

transform

Berdasarkan kesan di atas, jika kita menggabungkan

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

animasi bingkai demi bingkai

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

yang dinyatakan pada permulaan dengan

animasi tween

di sini, keseluruhannya pergerakan ul, dan Susun pergerakan individu li bersama-sama:

untuk mendapatkan kesan seperti ini:

Wah, menakjubkan Satu tindak balas kimia berlaku! Berdasarkan gabungan

animasi bingkai demi bingkai

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

dan

animasi tween

, kami hampir mencapai kesan karusel.

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

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

實際開發(fā)過輪播的同學(xué)肯定知道，這里，其實也很好處理，我們只需要在末尾，補一組頭部的第一個數(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>
    <!--末尾補一個首條數(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ù)，以達到根據(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>
    <!--末尾補一個首尾數(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)效果

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

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

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

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

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

Atas ialah kandungan terperinci Ternyata karusel teks dan karusel imej juga boleh direalisasikan menggunakan CSS tulen!. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!