Langkah-langkah pelaksanaan melaksanakan carta karusel responsif menggunakan CSS tulen-tutorial css-php.cn

Langkah-langkah pelaksanaan melaksanakan carta karusel responsif menggunakan CSS tulen

WBOY

Lepaskan： 2023-10-21 10:02:04

asal

1565 orang telah melayarinya

Langkah-langkah pelaksanaan melaksanakan carta karusel responsif menggunakan CSS tulen

Langkah-langkah untuk melaksanakan carta karusel responsif menggunakan CSS tulen Contoh kod khusus adalah seperti berikut:

Dengan populariti peranti mudah alih. , Reka bentuk responsif telah menjadi bahagian penting dalam reka bentuk web moden. Imej karusel ialah salah satu elemen yang biasa digunakan dalam reka bentuk web Untuk menyesuaikan diri dengan peranti dengan saiz skrin yang berbeza, kami boleh menggunakan CSS tulen untuk melaksanakan imej karusel yang responsif.

Langkah 1: Struktur HTML

Pertama, buat bekas yang mengandungi karusel dalam HTML:

rreee

Langkah 2: gaya CSS# 🎜

Seterusnya, kami menggunakan CSS untuk menentukan gaya karusel. Mula-mula, tetapkan lebar dan ketinggian bekas dan tetapkannya kepada kedudukan relatif supaya kedudukan mutlak elemen dalaman boleh diletakkan relatif kepada bekas.

<div class="slider">
  <div class="slides">
    <div class="slide"><img src="image1.jpg" alt="Image 1"></div>
    <div class="slide"><img src="image2.jpg" alt="Image 2"></div>
    <div class="slide"><img src="image3.jpg" alt="Image 3"></div>
  </div>
</div>

Salin selepas log masuk

Kemudian, tetapkan lebar dan tinggi bekas slaid karusel, dan tetapkannya kepada kedudukan mutlak supaya ia diposisikan berbanding dengan bekas karusel.

.slider {
  position: relative;
  width: 100%;
  height: 300px;
}

Salin selepas log masuk

Tetapkan lebar dan tinggi setiap slaid dalam bekas slaid, dan tetapkannya kepada kedudukan mutlak supaya ia disusun secara mendatar di atas satu sama lain.

.slides {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

Salin selepas log masuk

Akhir sekali, tambahkan imej latar belakang pada setiap slaid dan tetapkan gaya yang sesuai untuk menyusunnya secara mendatar.

.slide {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

Salin selepas log masuk

Langkah 3: Animasi CSS

Kita boleh menggunakan animasi CSS untuk mencapai kesan karusel. Gunakan bingkai utama animasi untuk menentukan cara slaid meluncur dari kanan ke kiri.

.slide:nth-child(1) {
  background-image: url('image1.jpg');
  z-index: 3;
}
.slide:nth-child(2) {
  background-image: url('image2.jpg');
  z-index: 2;
}
.slide:nth-child(3) {
  background-image: url('image3.jpg');
  z-index: 1;
}

Salin selepas log masuk

Kemudian, gunakan animasi ini pada bekas slaid dan tetapkan masa main animasi dan kiraan gelung.

@keyframes slide {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-100%);
  }
}

Salin selepas log masuk

Langkah 4: Reka Bentuk Responsif

Untuk menyesuaikan diri dengan peranti dengan saiz skrin yang berbeza, kami boleh menggunakan pertanyaan media untuk melaraskan saiz dan gaya karusel. Dalam contoh ini, kami menetapkan ketinggian bekas karusel untuk menyesuaikan diri pada skrin kecil.

.slides {
  animation: slide 10s infinite;
}

Salin selepas log masuk

Pada ketika ini, kami telah menyelesaikan langkah-langkah untuk melaksanakan karusel responsif dengan CSS tulen. Melalui pertanyaan media dan animasi CSS, kami boleh melaksanakan kesan karusel yang menyesuaikan diri dengan saiz skrin yang berbeza pada peranti mudah alih dan desktop.

Sila ambil perhatian bahawa nama fail imej dalam contoh di atas adalah untuk rujukan sahaja, dan anda perlu menggantikannya dengan fail imej anda sendiri mengikut situasi sebenar.

Saya harap artikel ini akan membantu anda!

Atas ialah kandungan terperinci Langkah-langkah pelaksanaan melaksanakan carta karusel responsif menggunakan CSS tulen. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!