Contoh cara menggunakan CSS3 untuk mencapai kesan karusel imej-Soal Jawab bahagian hadapan-php.cn

Contoh cara menggunakan CSS3 untuk mencapai kesan karusel imej

PHPz

Lepaskan： 2023-04-06 17:03:46

asal

1266 orang telah melayarinya

Dengan perkembangan Internet, reka bentuk web memberi lebih banyak perhatian kepada pengalaman pengguna. Karusel imej juga telah menjadi elemen biasa dalam reka bentuk web, terutamanya dalam tapak web komersial, di mana karusel imej telah menjadi cara penting untuk memaparkan maklumat seperti produk, jenama, acara, dsb. Artikel ini akan memperkenalkan cara menggunakan CSS3 untuk mencapai kesan karusel imej yang ringkas.

Struktur HTML

Pertama, kita perlu menyediakan struktur HTML asas. Buat bekas dalam halaman dan tambahkan berbilang imej di dalamnya. Di sini, kami akan menggunakan tag ul dan li untuk membuat senarai gambar untuk karusel gambar, di mana setiap gambar ialah tag li. Kodnya adalah seperti berikut:

<div class="slider">
  <ul>
    <li><img src="image1.jpg"></li>
    <li><img src="image2.jpg"></li>
    <li><img src="image3.jpg"></li>
  </ul>
</div>

Salin selepas log masuk

Gaya CSS

Seterusnya, kita perlu menggunakan CSS untuk mengawal gaya dan kesan animasi senarai imej. Mula-mula, tetapkan ul kepada kedudukan relatif supaya anda boleh menggunakan kedudukan mutlak untuk mengawal kedudukan tag li.

.slider ul {
  position: relative;
  overflow: hidden;
}

Salin selepas log masuk

Kemudian, tetapkan tag li kepada kedudukan mutlak dan tetapkan lebar dan tinggi setiap tag li.

.slider ul li {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  opacity: 0;
  transition: opacity .5s ease-in-out;
}

Salin selepas log masuk

Dalam kod ini, kami juga menetapkan ketelusan awal setiap teg li kepada 0 dan menetapkan kesan peralihan untuk menjadikan penukaran imej lebih semula jadi.

Gunakan animasi CSS3 untuk mencipta kesan karusel gambar

Selepas menyediakan struktur HTML dan gaya CSS, kita boleh mula menggunakan animasi CSS3 untuk mencipta kesan karusel gambar.

Pertama, kita perlu menetapkan masa tunda animasi yang berbeza untuk setiap teg li. Ini adalah untuk membolehkan setiap gambar kekal untuk tempoh masa sebelum kesan animasi bermula, mewujudkan kesan karusel visual. Kodnya adalah seperti berikut:

.slider ul li:nth-child(1) {
  animation: bannermove 15s linear infinite 0s;
}

.slider ul li:nth-child(2) {
  animation: bannermove 15s linear infinite 5s;
}

.slider ul li:nth-child(3) {
  animation: bannermove 15s linear infinite 10s;
}

Salin selepas log masuk

Dalam kod di atas, kami menetapkan animasi bernama "bannermove" untuk setiap tag li, tetapkan masa animasi selama 15 saat, gunakan animasi linear dan gelung tak terhingga, Berbeza masa tunda (0 saat, 5 saat, 10 saat) telah ditetapkan untuk membentuk kesan karusel.

Seterusnya, kita perlu mencipta kesan animasi itu sendiri. Kami akan menggunakan peraturan @keyframes untuk menentukan animasi. Kodnya adalah seperti berikut:

@keyframes bannermove {
  0% {
    opacity: 0;
  }
  4% {
    opacity: 1;
  }
  24% {
    opacity: 1;
  }
  28% {
    opacity: 0;
  }
  100% {
    opacity: 0;
  }
}

Salin selepas log masuk

Dalam kod di atas, kami membahagikan animasi kepada lima peringkat. Peringkat 0% awal adalah telus sepenuhnya, beransur-ansur menjadi legap sehingga mencapai tahap 4%, apabila imej itu kelihatan sepenuhnya. Kemudian, pada peringkat 24%, imej masih legap dan mencapai titik puncak. Ia kemudian beransur-ansur menjadi legap sehingga ia tidak kelihatan sepenuhnya pada peringkat 28%, kemudian menghentikan animasi pada peringkat 100% dan menjadi telus sepenuhnya semula.

Kod lengkap adalah seperti berikut:

<html>
<head>
<style>

.slider {
  width: 100%;
  height: 500px;
  position: relative;
  overflow: hidden;
}

.slider ul {
  list-style-type: none;
  position: relative;
  overflow: hidden;
}

.slider ul li {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  opacity: 0;
  transition: opacity .5s ease-in-out;  
}

.slider ul li:nth-child(1) {
  animation: bannermove 15s linear infinite 0s;
}

.slider ul li:nth-child(2) {
  animation: bannermove 15s linear infinite 5s;
}

.slider ul li:nth-child(3) {
  animation: bannermove 15s linear infinite 10s;
}

@keyframes bannermove {
  0% {
    opacity: 0;
  }
  4% {
    opacity: 1;
  }
  24% {
    opacity: 1;
  }
  28% {
    opacity: 0;
  }
  100% {
    opacity: 0;
  }
}

</style>
</head>
<body>

<div class="slider">
  <ul>
    <li><img src="http://placekitten.com/400/400"></li>
    <li><img src="http://placekitten.com/g/400/400"></li>
    <li><img src="http://placekitten.com/400/400"></li>
  </ul>
</div>

</body>
</html>

Salin selepas log masuk

Di atas adalah mengenai penggunaan CSS3 untuk melaksanakan karusel imej. Kami boleh melaraskan gaya karusel imej dan kesan animasi mengikut keperluan untuk mencapai pengalaman pengguna yang terbaik.

Atas ialah kandungan terperinci Contoh cara menggunakan CSS3 untuk mencapai kesan karusel imej. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!