Komentar: Ketika datang ke slider, di masa lalu, CSS+JS telah digunakan untuk mencapai efek switching terkait. Saya telah mendengar bahwa semua orang telah membahas metode implementasi menggunakan HTML5+CSS3, tetapi saya tidak pernah menerapkannya sendiri. Oke, saya punya waktu untuk bermain CSS3 kali ini. Teman yang tertarik dapat mempelajari lebih lanjut
Yah, terakhir kali saya mengatakan saya akan menambahkan beberapa artikel dengan cepat, tetapi saya dengan tenang memecahkan janji temu. Ini hanya diterbitkan dalam sebulan lagi, yang benar -benar menyedihkan. Saya menemukan bahwa saya selalu tidak dapat menemukan waktu baru -baru ini, dan pada dasarnya mengatur satu proyek demi satu. Saya tidak dapat menemukan topik yang tepat ketika saya bebas, atau saya tidak dapat menemukan waktu ketika saya bingung. Jadi saya memutuskan untuk meringkas titik -titik pengetahuan dari masalah yang telah saya perjuangkan untuk jangka waktu tertentu, dan mempelajarinya satu per satu ketika saya bebas, dan kemudian mengaturnya menjadi artikel dan membagikannya.Mulai dari topik, ketika Anda menyebutkan slider, Anda selalu menggunakan CSS+JS untuk mencapai efek switching terkait. Saya telah mendengar bahwa semua orang telah membahas metode implementasi menggunakan HTML5+CSS3, tetapi saya tidak pernah menerapkannya sendiri. Oke, saya punya waktu untuk bermain CSS3 kali ini. Bahkan, saya juga tertarik dengan pesan di Weibo. Melihat bahwa hasil yang dicapai oleh orang lain sangat baik, saya memiliki keinginan untuk melakukannya.
1. Diagram reproduksi
Tampaknya tidak jauh berbeda dari efek yang dicapai dengan JS di masa lalu, tetapi perasaan keseluruhannya sangat elegan. Nah, kekuatan CSS3 adalah bahwa saya telah menulis sangat sedikit kode untuk mencapai hasil yang lebih kompleks. Namun, contoh ini juga memiliki sesuatu yang tidak sempurna. Saat beralih di antara dua gambar, jika ada gambar di tengah, Anda masih akan melihatnya selama eksekusi animasi CSS3, yang kurang kuat. Tetapi pikirkan, ini adalah efek yang dicapai oleh CSS3 murni. Perubahan struktur HTML yang kompleks yang diimplementasikan menggunakan JS tidak dapat dilihat di sini, sehingga efek di atas sulit untuk diterapkan dengan CSS3.
2. Struktur HTML
<div>
<input periksa type = "Radio">
<input type = "Radio">
<input type = "Radio">
<input type = "Radio">
<input type = "Radio">
<div>
<div>
<div>
<martikel>
<div>
<h1> title1 </h1>
<a href = "#"> Deskripsi1 </a>
</div>
<img src = "img/pic1.png"/>
</artikel>
<martikel>
<div>
<h1> title2 </h1>
<a href = "#"> Deskripsi2 </a>
</div>
<img src = "img/pic2.png"/>
</artikel>
<martikel>
<div>
<h1> title3 </h1>
<a href = "#"> Deskripsi3 </a>
</div>
<img src = "img/pic3.png"/>
</artikel>
<martikel>
<div>
<h1> title4 </h1>
<a href = "#"> Deskripsi4 </a>
</div>
<img src = "img/pic4.png"/>
</artikel>
<martikel>
<div>
<h1> title5 </h1>
<a href = "#"> Deskripsi5 </a>
</div>
<img src = "img/pic5.png"/>
</artikel>
</div>
</div>
</div>
<div>
<label untuk = "slider1"> </label>
<label untuk = "slider2"> </label>
<Label untuk = "Slider3"> </LABEL>
<Label untuk = "Slider4"> </LABEL>
<label untuk = "slider5"> </label>
</div>
<div>
<label untuk = "slider1"> </label>
<label untuk = "slider2"> </label>
<Label untuk = "Slider3"> </LABEL>
<Label untuk = "Slider4"> </LABEL>
<label untuk = "slider5"> </label>
</div>
</div>
Kode di atas adalah struktur HTML utama, yang berisi grup radio input, yang dapat Anda lihat di sini sebagai hub, dan memainkan peran yang sangat penting dalam contoh ini (inilah mengapa saya tidak ingin menyembunyikannya dalam contoh, pahlawan asli seharusnya tidak menjadi pahlawan di balik adegan).
Slider di bawah ini berisi gambar yang perlu ditampilkan. Di sini tampaknya menjadi efek dari pintu geser, yang menampilkan gambar yang berbeda dengan mengendalikan margin-margin bagian dalam.
Kontrol adalah panah switching di sisi kiri dan kanan gambar. Jangan khawatir, mengapa Anda perlu mendesain 5? Tampaknya dua sudah cukup. Harap ingatkan kami bahwa dalam contoh ini, kami tidak akan pernah menggunakan JS untuk mencapai switching.
Aktif terakhir adalah tombol klik di bawah gambar. Anda dapat secara langsung memilih gambar yang ingin Anda jelajahi dengan mengkliknya. Anda juga dapat memperkaya struktur di dalam untuk merancang efek thumbnail.
3. Lembar Gaya CSS
@charset UTF-8;
/* umum */
body {background: #ddd; overflow-x: tersembunyi;}
#bd {width: 960px; margin: 100px auto; max-lebar: 960px;}
/ * modul: slider */
#sliders {
Border-Radius: 5px;
Kotak-Shadow: 1px 1px 4px #666;
Padding: 1%;
Latar Belakang: #FFFF;
}
#meluap{
Lebar: 100%;
meluap: tersembunyi;
}
#sliders .inner {
Lebar: 500%;
Transiton: Semua linear 1s;
-webkit-transisi: semua linear 1s;
}
Artikel #Sliders {
float: kiri;
Lebar: 20%;
}
Artikel #Sliders .info {
Posisi: Absolute;
Opacity: 0;
padding: 30px;
Warna: #666;
Font-Family: Arial;
Transisi: Opacity 0.1S kemudahan;
-webkit-transform: translatez (0);
-webkit-transisi: Opacity 0.1S EASE-OUT;
}
Artikel #Sliders .info h1 {
Ukuran font: 22px;
font-weight: tebal;
Margin: 0 0 5px;
}
Artikel #Sliders .info a {
Warna: #666;
Dekorasi Teks: Tidak Ada;
}
/ * Modul: Kontrol */
#Controls {
Tinggi: 50px;
Lebar: 100%;
margin -top: -25%;
}
label #Controls {
Tampilan: Tidak Ada;
Lebar: 50px;
Tinggi: 50px;
Opacity: 0.3;
kursor: pointer;
}
Label #Controls: Hover {
Opacity: 1;
}
/ * modul: aktif */
#aktif{
Lebar: 100%;
margin-top: 23%;
Teks-Align: tengah;
}
label #active {
Tampilan: blok inline;
Lebar: 10px;
Tinggi: 10px;
Border-Radius: 5px;
Latar Belakang: #BBB;
Border-color: #777;
}
#Active Label: Hover {
Latar Belakang: #CCC;
}
/ * input memeriksa gaya perubahan */
#Slider1: Diperiksa ~ #Active Label: Nth-Child (1),
#Slider2: Diperiksa ~ #Active Label: Nth-Child (2),
#Slider3: Diperiksa ~ #Active Label: Nth-Child (3),
#Slider4: Diperiksa ~ #Active Label: Nth-Child (4),
#slider5: checked ~ #active label: nth-child (5) {
Latar Belakang: #333;
}
#Slider1: Diperiksa ~ #Controls Label: Nth-Child (5),
#Slider2: Diperiksa ~ #Controls Label: Nth-Child (1),
#Slider3: Diperiksa ~ #Controls Label: Nth-Child (2),
#Slider4: Diperiksa ~ #Controls Label: Nth-Child (3),
#Slider5: Diperiksa ~ #Controls Label: nth-child (4) {
Tampilan: Blok;
float: kiri;
Latar belakang: url (../ img/prev.png) no-repeat;
margin -kiri: -70px;
}
#Slider1: Diperiksa ~ #Controls Label: Nth-Child (2),
#Slider2: Diperiksa ~ #Controls Label: Nth-Child (3),
#Slider3: Diperiksa ~ #Controls Label: Nth-Child (4),
#Slider4: Diperiksa ~ #Controls Label: Nth-Child (5),
#Slider5: Diperiksa ~ #Controls Label: nth-child (1) {
Tampilan: Blok;
float: benar;
Latar belakang: url (../ img/next.png) no-repeat;
margin -kanan: -70px;
}
#slider1: checked ~ #sliders artikel: nth-child (1) .info,
#slider2: checked ~ #sliders artikel: nth-child (2) .info,
#Slider3: Diperiksa ~ #Sliders Artikel: Nth-Child (3) .info,
#Slider4: Diperiksa ~ #Sliders Artikel: Nth-Child (4) .info,
#slider5: checked ~ #sliders artikel: nth-child (5) .info {
Opacity: 1;
Transisi: semua kemudahan 0,6 1;
-webkit-transisi: semua kemudahan 0,6 1s;
}
#slider1: checked ~ #sliders .inner {
margin-kiri: 0;
}
#slider2: checked ~ #sliders .inner {
margin -kiri: -100%;
}
#slider3: checked ~ #sliders .inner {
margin -kiri: -200%;
}
#slider4: checked ~ #sliders .inner {
margin -kiri: -300%;
}
#slider5: checked ~ #sliders .inner {
margin -kiri: -400%;
}
Oke, saya akui bahwa kode CSS di atas benar -benar lebih rumit dan rumit, tetapi itu benar -benar mencapai efek yang sangat mempesona, dan ketika saya selesai menulisnya, saya juga terkesan dengan keajaiban besar CSS3. . .
Kode di paruh pertama ini terutama digunakan untuk merancang struktur slider, termasuk beberapa sudut bulat dan desain kecantikan bayangan. Babak kedua terutama berisi beberapa efek animasi untuk mewujudkan beberapa efek dinamis saat mengganti gambar atau tombol kontrol. Namun, yang paling penting adalah penggunaan pemilih CSS3 bawah, yang benar -benar menyadari fungsi switching gambar. Saya benar -benar berpikir penyeleksi memainkan peran yang sangat, sangat penting dalam contoh, karena inilah yang saya abaikan dalam mempelajari CSS3 di masa lalu. Saya selalu berpikir bahwa apa yang kuat tentang CSS3 adalah sudut, bayangan, deformasi, dan animasi yang bulat, tetapi kode ini benar -benar memberi tahu kita betapa pentingnya pemilih di CSS3. Dalam beberapa logika yang kompleks, menggunakan selektor CSS3 ini dapat mencapai efek yang tidak terbayangkan.
4. Prinsip Implementasi Slider
Ketika saya pertama kali selesai membaca kode di atas, Anda harus sama seperti yang saya lakukan di awal. Saya tidak percaya bahwa kode seperti itu dapat mencapai efek slider.
Oke, izinkan saya menganalisis prinsip implementasi.
Seperti yang saya katakan di atas, grup radio teratas sangat penting dan merupakan pusat implementasi slider. Ya, memang begitu.
Untuk mengimplementasikan slider, hanya ada dua jenis switching, yaitu, ketika mengklik tombol kontrol, gambar diaktifkan; Pada saat yang sama, saat mengganti gambar, pastikan semua tombol kontrol ditampilkan dengan benar.
Dalam contoh ini, kami menggunakan label sebagai tombol kontrol, artikel berisi gambar, dan bagian dalam sebagai wadah gambar.
Hanya memikirkannya secara sederhana, label dan artikel tidak dapat terhubung, dan label informasi status sulit untuk mencerminkan pilihan artikel. Kecuali ada sesuatu yang dapat merekam status switching label, dan kemudian pilih gambar dalam urutan yang sesuai untuk menampilkannya melalui beberapa cara.
Nah, sekarang Anda mengerti mengapa grup radio itu adalah kunci untuk mengimplementasikan slider. Ya, tampaknya merekam status klik label.
Kami menggunakan atribut label untuk sesuai dengan radio yang sesuai. Ketika label diklik, radio yang sesuai diperiksa. Kemudian pindahkan bagian dalam ke kiri melalui pemilih CSS3 yang kuat untuk menampilkan gambar yang sesuai. Tentu saja, tombol pemilihan kiri dan kanan yang sesuai juga ditampilkan melalui pemilih. Dengan cara yang sama, ketika tombol kiri dan kanan diklik, status 5 tombol seleksi di bawah ini juga direalisasikan dengan cara ini.
Prinsip implementasi di atas relatif sederhana. Bahkan, selama Anda dapat merekam status klik tombol kontrol, Anda dapat mencapai efek slider melalui pemilih.
Tidak hanya grup radio yang dapat melakukannya, A: Hover juga dapat menerapkan switching gambar saat melayang sesuai dengan ide ini. Tentu saja, ada banyak metode implementasi lainnya, selama Anda memahami prinsip implementasi.
5. Ringkasan
Faktanya, CSS3 benar -benar menyenangkan, dengan banyak efek. Di CSS3, hanya ada hasil yang tidak terduga, tetapi tidak ada yang bisa melakukannya. Kadang -kadang saya benar -benar menemukan bahwa menulis CSS3 membutuhkan sedikit kepintaran, dan kadang -kadang beberapa metode implementasi yang sangat indah benar -benar patut dipuji.
Nah, sebagai praktik kecil, contoh ini telah banyak mendapatkan, terutama pemilih yang kuat, yang membuat saya malu bahwa saya telah mengabaikannya di masa lalu. . .
Saya juga perlu mempertimbangkan masalah switching gambar terputus -putus. Sepertinya saya harus menggunakan JS kecil untuk membantu.
Oke, mari kita bagikan jika ada hasilnya.