Kaedah: 1. Gunakan "element:hover{animation:name time;}" untuk mengikat gaya animasi apabila tetikus melayang; ;}}" Hanya nyatakan tindakan putaran 360 darjah.
Persekitaran pengendalian tutorial ini: sistem Windows 10, versi CSS3&&HTML5, komputer Dell G3.
Langkah pertama: Gunakan pemilih :hover untuk menetapkan gaya elemen apabila tetikus melayang.
: Gaya istimewa ditambah dengan tuding apabila tetikus bergerak ke atas pautan.
Petua: Pemilih :hover boleh digunakan pada semua elemen, bukan hanya pautan.
Atribut animasi boleh mengikat gaya animasi pada elemen.
Langkah 2: Gunakan peraturan bingkai utama dan ubah:putar untuk menetapkan putaran 360 elemen.
Menggunakan peraturan @keyframes anda boleh mencipta animasi.
Cipta animasi dengan menukar secara beransur-ansur daripada satu tetapan gaya CSS kepada yang lain.
Anda boleh menukar tetapan gaya CSS beberapa kali semasa animasi.
Nyatakan apabila perubahan berlaku menggunakan %, atau kata kunci "dari" dan "kepada", yang sama dengan 0% hingga 100%.
Contoh adalah seperti berikut:
<html>
<head>
<style>
div{
width:100px;
height:100px;
background-color:pink;
}
div:hover{
animation:fadenum 3s;
}
@keyframes fadenum{
100%{transform:rotate(360deg);}
}
</style>
</head>
<body>
<div>360度</div>
</body>
</html>Hasil keluaran:
(Belajar perkongsian video: tutorial video css )
Atas ialah kandungan terperinci Cara mencipta kesan putaran 360 darjah pada tuding tetikus dengan CSS3. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!
![[Web front-end] Permulaan pantas Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
