Kaedah: 1. Gunakan "@keyframes animation name {100% {transform:rotate(angle)}" untuk mencipta animasi putaran 2. Gunakan "element:hover{animation: animation name time linear infinite}; " untuk menetapkan animasi Pencetus apabila tetikus bergerak ke atas elemen.
Persekitaran pengendalian tutorial ini: sistem Windows 7, versi CSS3&&HTML5, komputer Dell G3.
Css untuk mencapai kesan putaran apabila tetikus bergerak ke atas
Kesan putaran boleh dibuat menggunakan animasi atribut dan peraturan "@keyframes" Pelaksanaan animasi.
Apabila tetikus dialihkan ke atas elemen, pemilih :hover diperlukan untuk mencetuskan animasi putaran. (:pemilih hover digunakan untuk memilih elemen yang penunjuk tetikus terapung dan menetapkan gaya.)
Kod pelaksanaan:
<!DOCTYPE html>
<html>
<head>
<style>
div {
width: 100px;
height: 100px;
background-color: red;
margin: 50px auto;
}
div:hover {
animation: mymove 1s linear infinite;
}
@keyframes mymove {
100% {
transform: rotate(360deg);
}
}
@-webkit-keyframes mymove {/* Safari and Chrome */
100% {
transform: rotate(360deg);
}
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>
(Belajar perkongsian video: tutorial video css)
Atas ialah kandungan terperinci Bagaimana untuk mencapai kesan putaran menggerakkan tetikus ke atas dalam css. 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)
