putaran kesan css3

Putaran Kesan Khas CSS3

Dalam reka bentuk web, kesan khas dinamik boleh meningkatkan interaktiviti dan kesenian halaman web, menjadikan pengguna melayari web dengan lebih gembira. Antaranya, kesan putaran adalah kesan khas yang agak biasa. Dalam CSS3, kesan putaran boleh dicapai melalui atribut transformasi.

1. Gunakan transformasi untuk mencapai putaran

Atribut transformasi dalam CSS3 digunakan untuk mencapai kesan ubah bentuk elemen, seperti putaran, pergerakan, penskalaan, dsb. Apabila menyedari kesan putaran elemen, anda boleh menggunakan fungsi putaran putar Sintaks khusus adalah seperti berikut:

transformasi: putar (sudut putaran); boleh menjadi nombor positif atau negatif atau 0.

2. Mencapai kesan putaran imej

1. Kesan putaran asas

Berikut ialah contoh mudah anda boleh mencapai kesan putaran imej dengan melayangkan tetikus di atas imej . Kod CSS adalah seperti berikut:

.rotate-img{

}
.rotate-img:hover{
transform: rotate( 360deg);
}

Dalam kod ini, atribut peralihan digunakan untuk mencapai kesan peralihan animasi, dengan transformasi mewakili atribut peralihan, 0.5s mewakili masa peralihan dan kemudahan mewakili kaedah peralihan. Dalam kelas pseudo :hover, gunakan fungsi transform:rotate untuk mencapai kesan putaran, dengan sudut putaran ialah 360 darjah.

2. Putaran dengan kesan penskalaan

Dalam kesan putaran asas di atas, anda boleh mencapai kesan putaran pada sudut yang berbeza dengan menukar parameter sudut putaran. Pada masa yang sama, kami juga boleh menggabungkan kesan zum untuk mencapai kesan putaran yang lebih sejuk. Berikut ialah contoh kod:

.putar-img{

}
.putar-img:tuding{
ubah: putar(360deg) skala(1.5);
}

Dalam kod ini, transform:rotate(360deg) skala(1.5) bermakna semasa putaran, terdapat juga kesan pembesaran dan pengurangan sebanyak 1.5 kali. Sudah tentu, faktor zum dan kesan animasi lain boleh dilaraskan sendiri.

3. Realisasikan kesan putaran menu navigasi

Selain kesan putaran pada gambar, kesan putaran juga boleh direalisasikan pada menu navigasi dan elemen lain. Berikut ialah contoh kod:

.putar-menu{

justify-content: center;
}
.putar-menu li{
kedudukan : relatif;
jidar: 0 1em;
peralihan: ubah 0.5s mudah;
}
.putar-menu li a{
paparan: blok;
pelapik: 10px 20px;
}
.rotate-menu li:hover{
transform: rotate(360deg);
}
.rotate-menu li:hover a{
text-shadow: 0px 0px 2px #fff;
}

Dalam kod ini, elemen li ditambahkan pada menu navigasi, atribut kedudukan ditetapkan kepada elemen li dan kesan putaran dicetuskan melalui :hover pseudo- kelas. Pada masa yang sama, tambahkan gaya bayang teks pada teks menu untuk mencapai kesan yang lebih tiga dimensi.

Ringkasan

Dalam CSS3, menggunakan atribut transformasi boleh mencapai kesan putaran elemen dengan mudah dan ia juga boleh digabungkan dengan penskalaan, pergerakan dan kesan lain untuk mencapai kesan dinamik yang lebih sejuk. Dalam reka bentuk web, penggunaan kesan putaran yang betul boleh meningkatkan pengalaman pengguna dan kesenian halaman web, tetapi berhati-hati agar tidak terlalu menggunakannya untuk mengelakkan menjejaskan kelajuan halaman web.

Atas ialah kandungan terperinci putaran kesan css3. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!