本文主要是介绍css + js和纯css实现图片不停旋转 鼠标悬停停止旋转，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！
-
css + js 实现：
效果图如下动图所示：
代码如下：
<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title><style>#img {border-radius: 50%;cursor: pointer;position: absolute;top: 50%;left: 50%;margin-top: -150px;margin-left: -150px;}</style><script>var rotateVal = 0 // 旋转角度var InterVal // 定时器window.onload = function () {// 网页加载完成后即运行rotate函数rotate()// 鼠标悬浮在图片上时，停止旋转，即清除定时器document.getElementById('img').onmousemove = function () {clearInterval(InterVal)}// 鼠标离开图片时，继续旋转，即继续运行定时器document.getElementById('img').onmouseleave = function () {rotate()}}// 设置定时器function rotate () {InterVal = setInterval(function () {var img = document.getElementById('img')rotateVal += 1// 设置旋转属性(顺时针)img.style.transform = 'rotate(' + rotateVal + 'deg)'// 设置旋转属性(逆时针)//img.style.transform = 'rotate(-' + rotateVal + 'deg)'// 设置旋转时的动画 匀速0.1simg.style.transition = '0.1s linear'}, 100)}</script></head><body><img id="img" src="images/111.jpg" width="300px" height="300px" /></body>
</html>
111.jpg文件：
-
纯css实现：
#img {border-radius: 50%;cursor: pointer;position: absolute;top: 50%;left: 50%;margin-top: -150px;margin-left: -150px;animation: rotate 10s linear infinite;}#img:hover {animation-play-state: paused;}@keyframes rotate {from {transform: rotate(0deg);}to {transform: rotate(360deg);}}这篇关于css + js和纯css实现图片不停旋转 鼠标悬停停止旋转的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！
