是的,在CSS中,可以使用@keyframes
規則和:hover
偽類選擇器結合來實現元素的旋轉效果。下面是一個簡單的示例:
<!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>
在這個示例中,當鼠標懸停在.box
元素上時,它會開始旋轉。@keyframes
定義了一個名為rotation
的動畫,從0度開始,到359度結束,實現了360度的旋轉效果。transition
屬性使得旋轉過程更加平滑。