经常逛掘金帖子，不小心把鼠标放在了头像上，结果发现了个有趣的动画：当鼠标放置在头像时，头像会不断旋转，且旋转速度越来越快，当鼠标移出后旋转停止。
正好这几天公司没什么事，摸鱼中，闲来没事就浅浅实现了下，很简单很简单~~~
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<style>
img {
width: 100px;
height: 100px;
border-radius: 50%;
border: 1px solid #ebebeb;
cursor: pointer;
}
</style>
<body>
<img src="./image.png" alt="" srcset="">
</body>
<script>
const img = document.querySelector('img');
let deg, frequent = 0;
let timer = null;
img.addEventListener('mouseenter', () => {
timer = setInterval(() => {
frequent += 0.005;
deg += frequent;
img.style.transform = `rotate(${deg}deg)`;
})
})
img.addEventListener('mouseout', () => {
if (timer) {
clearInterval(timer);
}
frequent = 0;
deg = 0;
img.style.transform = `rotate(0deg)`;
})
</script>
</html>
