Rumah > Artikel > hujung hadapan web > Ternyata karusel teks dan karusel imej juga boleh direalisasikan menggunakan CSS tulen!

Ternyata karusel teks dan karusel imej juga boleh direalisasikan menggunakan CSS tulen!

青灯夜游ke hadapan: 2022-06-10 13:00:594245semak imbas

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 {
  // 轮播的个数
  --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));
  }
}

, 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

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:

Ternyata karusel teks dan karusel imej juga boleh direalisasikan menggunakan CSS tulen! untuk mendapatkan kesan seperti ini:

Wah, menakjubkan Satu tindak balas kimia berlaku! Berdasarkan gabungan

animasi bingkai demi bingkai

: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%;
  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.

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

整个动画的 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前端）

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!

JavaScript css html 循环 var JS function dom overflow transform animation ul li

Kenyataan：

Artikel ini dikembalikan pada:segmentfault.com. Jika ada pelanggaran, sila hubungi admin@php.cn Padam

Artikel sebelumnya：[Ringkasan Muntah Darah] 20 alat praktikal bahagian hadapan, tambahkannya pada kegemaran anda!Artikel seterusnya：[Ringkasan Muntah Darah] 20 alat praktikal bahagian hadapan, tambahkannya pada kegemaran anda!

Artikel berkaitan

Lihat lagi