Rumah > Artikel > hujung hadapan web > Bagaimana untuk mencapai kesan animasi berputar dalam css
Bagaimana untuk mencapai kesan animasi berputar dalam css
- WBOYasal
- 2021-12-09 15:08:4522650semak imbas
Kaedah: 1. Gunakan pernyataan "elemen {animation:name time infinite}" untuk mengikat animasi pada elemen 2. Gunakan "@keyframes name {100%{transform:rotate(rotation angle)} }" pernyataan Tetapkan tindakan putaran animasi untuk mencapai kesan putaran berterusan elemen.
Persekitaran pengendalian tutorial ini: sistem Windows 10, versi CSS3&&HTML5, komputer Dell G3.
Cara untuk mencapai kesan animasi berputar dalam css
Dalam css, anda boleh menggunakan atribut animasi untuk mengikat animasi pada elemen, dan atribut animasi boleh dikawal Tempoh dan masa animasi, sintaksnya ialah:
animation: name duration timing-function delay iteration-count direction;
di mana:
Apabila nilai atribut ditetapkan kepada "tak terhingga", ia menyatakan bahawa animasi boleh dimainkan secara infiniti , apabila kita mengikat animasi putaran pada elemen, ia boleh terus berputar.
Kemudian tetapkan tindakan putaran animasi melalui peraturan @keyframes.
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>
div{
width:100px;
height:100px;
background-color:pink;
animation:fadenum 5s infinite;
}
@keyframes fadenum{
100%{transform:rotate(360deg);}
}
</style>
</head>
<body>
<div></div>
</body>
</html>Hasil keluaran:
(Belajar perkongsian video: tutorial video css )
Atas ialah kandungan terperinci Bagaimana untuk mencapai kesan animasi berputar dalam css. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!