css untuk melaksanakan animasi putaran imej

Dalam reka bentuk web, gambar adalah salah satu elemen yang sangat diperlukan. Untuk menjadikan laman web lebih menarik dan menarik, kita boleh menggunakan teknologi animasi CSS3 untuk menambah kesan animasi putaran pada imej. Seterusnya, artikel ini akan memperkenalkan cara menggunakan CSS untuk melaksanakan animasi putaran imej.

1. Langkah

Untuk mencapai animasi putaran imej, kita perlu mengikuti langkah berikut:

1. Tambah tag imej dalam HTML:

Mula-mula, tambahkan tag imej pada HTML. Contohnya:

b05da09e0049ce30c0c7b7e8995ea830

2. Tetapkan gaya imej dalam CSS:

Kedua, tetapkan gaya imej dalam CSS. Contohnya:

img{
lebar: 200px; //Tetapkan lebar imej kepada 200px
tinggi: 200px; //Tetapkan ketinggian imej kepada 200px
sempadan- jejari: 50%; //Tetapkan gambar menjadi bulat
peralihan: semua 0.5s; //Tetapkan tempoh animasi gambar kepada 0.5 saat
}

3. Tambah animasi putaran kesan:

Akhir sekali, tambah kod untuk kesan animasi putaran dalam CSS. Contohnya:

img:hover{

transform: rotate(360deg);   //设置图片旋转360度

}

2. Analisis Kod

Dalam kod di atas, kami menggunakan atribut transformasi CSS3 untuk laksanakan imej Putar. Atribut transformasi boleh mencapai pelbagai kesan transformasi, termasuk putaran, penskalaan, terjemahan, dsb. Di sini, kami menggunakan transform: rotate(360deg) untuk mencapai kesan animasi putaran imej. Antaranya, putar(360deg) bermakna gambar harus diputar 360 darjah.

Selain itu, kami juga menggunakan atribut peralihan untuk mengawal tempoh animasi. Atribut peralihan ialah cara untuk melaksanakan kesan peralihan CSS, yang boleh mengawal gaya elemen untuk peralihan dengan lancar dari satu keadaan ke keadaan yang lain. Di sini, kami menetapkan peralihan: semua 0.5s, yang bermaksud bahawa semua perubahan atribut akan mengambil masa 0.5 saat untuk peralihan yang lancar.

Akhir sekali, kami menggunakan transform: rotate(360deg) dalam pemilih img:hover untuk mencapai kesan putaran imej apabila tetikus melayang.

3. Kod lengkap

Berikut ialah kod CSS lengkap, termasuk gaya imej dan kesan animasi putaran:

img{
lebar: 200px; > tinggi: 200px;
jejari sempadan: 50%;
peralihan: semua 0.5s; 🎜 >4. Ringkasan

Dalam artikel ini, kami memperkenalkan cara menggunakan CSS untuk mencapai kesan animasi putaran imej. Dengan menggunakan atribut transform dan atribut peralihan CSS3, kita boleh mencapai kesan putaran imej dengan mudah. Percayai helah mudah ini untuk menjadikan halaman web anda lebih menarik dan menarik.

Atas ialah kandungan terperinci css untuk melaksanakan animasi putaran imej. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!