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

133 阅读 0 评论 88 点赞

我是靠谱客的博主孝顺钢笔，最近开发中收集的这篇文章主要介绍CSS3怎么做鼠标悬停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