Bagaimana untuk mencapai kesan putaran dalam css (contoh kod)

CSS ialah bahasa reka bentuk gaya halaman web yang digunakan secara meluas, dan putaran ialah salah satu kesan yang biasa digunakan. Penggiliran melalui CSS boleh menjadikan halaman web lebih cantik dan intuitif Berikut ialah beberapa kod penggiliran CSS yang biasa digunakan untuk rujukan.

1 Gunakan atribut transform

Atribut transformasi membolehkan elemen berputar, berskala, condong, bergerak, dsb. Elemen boleh diputar menggunakan kaedah rotate(), dengan deg ialah nilai sudut putaran, nombor positif menunjukkan putaran mengikut arah jam, dan nombor negatif menunjukkan putaran lawan jam.

Contohnya:

.putar {
ubah: putar(45deg);
}

2. Gunakan atribut peralihan dan kaedah putar

Atribut peralihan boleh mengawal kesan peralihan elemen, membolehkan elemen mempunyai kesan peralihan yang lancar apabila berputar.

Contohnya:

.putar {
peralihan: ubah 0.5s kemudahan-keluar;
}
.putar:tuding {
ubah: putar ( 45deg);
}

3 Gunakan atribut animasi dan peraturan @keyframes

Peraturan @keyframes boleh mentakrifkan bingkai utama dalam animasi CSS dan atribut animasi boleh mengawal prestasi animasi CSS .

Contohnya:

.putar {
animasi: rotate-ani 2s linear infinite;
}
@keyframes rotate-ani {
from {

transform: rotate(0deg);

}
hingga {

transform: rotate(360deg);

}
}

Di atas ialah beberapa kod putaran CSS yang biasa digunakan, yang merealisasikan putaran elemen dalam cara yang berbeza. Saya harap kod ini dapat membantu pembaca yang memerlukan dan menjadikan halaman web lebih cantik dan jelas.

Atas ialah kandungan terperinci Bagaimana untuk mencapai kesan putaran dalam css (contoh kod). Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!