在CSS中鼠标悬停出现旋转的效果的代码是什么

发布时间：2023-09-02 13:28:29 所属栏目：语言来源：

导读：关于“CSS中鼠标悬停出现旋转的效果的代码是什么”的知识有一些人不是很理解，对此小编给大家总结了相关内容，具有一定的参考借鉴价值，而且易于学习与理解，希望能对大家有所帮助，有这个方面学习需要的朋

关于“CSS中鼠标悬停出现旋转的效果的代码是什么”的知识有一些人不是很理解，对此小编给大家总结了相关内容，具有一定的参考借鉴价值，而且易于学习与理解，希望能对大家有所帮助，有这个方面学习需要的朋友就继续往下看吧。

方法：1、用“@keyframes 动画名{100% {transform:rotate(角度)}”创建旋转动画；2、用“元素:hover{animation:动画名时间 linear infinite}”设置在鼠标移上元素时触发动画。

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

css实现鼠标移上去旋转效果

旋转效果可以利用animation属性和“@keyframes”规则创建动画实现。

而鼠标移上元素，触发旋转动画需要使用:hover选择器。（:hover 选择器用于选择鼠标指针浮动在上面的元素，并设置样式。）

实现代码：

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

（编辑：聊城站长网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!