您的位置：首页 > 技术中心 > 前端框架 >

CSS3怎么做鼠标悬停360度旋转效果

时间：2022-03-30 11:48

方法：1、利用“元素:hover{animation:名称时间;}”来绑定鼠标悬停时的动画样式；2、利用“keyframes 名称{100%{transform:rotate(360deg);}}”规定360度旋转动作即可。

本教程操作环境：windows10系统、CSS3&&HTML5版、Dell G3电脑。

CSS3怎么做鼠标悬停360度旋转效果

第一步：利用:hover选择器，来设置元素鼠标悬停时的样式。

:hover在鼠标移到链接上时添加的特殊样式。

提示: :hover 选择器器可用于所有元素，不仅是链接。

animation属性可以元素绑定一个动画样式。

第二步：利用keyframes规则和transform:rotate设置元素360旋转。

使用@keyframes规则，你可以创建动画。

创建动画是通过逐步改变从一个CSS样式设定到另一个。

在动画过程中，您可以更改CSS样式的设定多次。

指定的变化时发生时使用％，或关键字"from"和"to"，这是和0％到100％相同。

示例如下：

<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>

输出结果：

+1.gif