是的,在CSS中,可以使用@keyframes
規(guī)則和:hover
偽類選擇器結(jié)合來實(shí)現(xiàn)元素的旋轉(zhuǎn)效果。下面是一個(gè)簡單的示例:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
.box {
width: 100px;
height: 100px;
background-color: red;
transition: transform 0.5s;
}
.box:hover {
animation: rotation 2s linear infinite;
}
@keyframes rotation {
from {
transform: rotate(0deg);
}
to {
transform: rotate(359deg);
}
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>
在這個(gè)示例中,當(dāng)鼠標(biāo)懸停在.box
元素上時(shí),它會開始旋轉(zhuǎn)。@keyframes
定義了一個(gè)名為rotation
的動(dòng)畫,從0度開始,到359度結(jié)束,實(shí)現(xiàn)了360度的旋轉(zhuǎn)效果。transition
屬性使得旋轉(zhuǎn)過程更加平滑。