Rumah > Artikel > hujung hadapan web > Bagaimana untuk membuat imej terus berputar dalam css3
Bagaimana untuk membuat imej terus berputar dalam css3
- WBOYasal
- 2022-03-28 18:34:053805semak imbas
Kaedah: 1. Gunakan pernyataan "img{animation:name time infinite}" untuk mengikat animasi pada imej; 2. Gunakan "@keyframes name{100%{transform:rotate(rotation angle)} }" pernyataan Tetapkan tindakan putaran animasi untuk mencapai kesan putaran berterusan gambar.
Persekitaran pengendalian tutorial ini: sistem Windows 10, versi CSS3&&HTML5, komputer Dell G3.
Cara membuat gambar terus berputar dalam css3
Dalam css, anda boleh menggunakan atribut animasi untuk mengikat animasi kepada elemen Atribut animasi boleh mengawal tempoh dan bilangan animasi sintaks ialah:
animation: name duration timing-function delay iteration-count direction;
kiraan lelaran nilai atribut mentakrifkan berapa kali animasi harus dimainkan. Apabila ditetapkan kepada infiniti, animasi akan dimainkan selama-lamanya.
Kemudian gunakan peraturan @keyframes dan transform:rotate untuk menetapkan tindakan putaran animasi.
Contoh adalah seperti berikut:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
img{
width:100px;
height:100px;
animation:fadenum 5s infinite;
}
@keyframes fadenum{
100%{transform:rotate(360deg);}
}
</style>
</head>
<body>
<img src="1118.01.png" alt="">
</body>
</html>Hasil keluaran:
(Belajar perkongsian video: tutorial video css )
Atas ialah kandungan terperinci Bagaimana untuk membuat imej terus berputar dalam css3. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!