Rumah > Artikel > hujung hadapan web > Contoh cara menggunakan CSS3 untuk mencapai kesan karusel imej
Contoh cara menggunakan CSS3 untuk mencapai kesan karusel imej
- PHPzasal
- 2023-04-06 16:44:561191semak imbas
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>
- 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;
}
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;
}
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;
}
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;
}
}
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>
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!