通过鼠标向下滚动使得图片开始旋转且自动加速,过5s后,图片停止旋转恢复初始状态。在图片旋转过程中图片所在容器不移动
时间: 2023-08-24 09:07:16 浏览: 49
可以使用CSS3的动画和JavaScript来实现这个效果。首先,我们需要将图片放在一个容器中,然后为容器添加CSS样式,使其固定在页面中心。然后,我们可以使用CSS3的旋转动画和JavaScript的计时器来实现图片的旋转和加速。最后,我们再使用计时器来实现图片恢复到初始状态。
HTML代码:
```
<div class="container">
<img src="image.jpg" alt="image" class="image">
</div>
```
CSS代码:
```
.container {
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.image {
width: 200px;
height: 200px;
transition: transform 1s ease;
}
.rotate {
animation: spin 5s linear infinite;
}
@keyframes spin {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
```
JavaScript代码:
```
var container = document.querySelector('.container');
var image = document.querySelector('.image');
var timer;
window.addEventListener('scroll', function() {
if (timer) {
clearTimeout(timer);
}
container.classList.add('rotate');
timer = setTimeout(function() {
container.classList.remove('rotate');
}, 5000);
});
```
在这个代码中,我们首先获取容器和图片元素,并定义一个计时器。当用户滚动页面时,我们清除之前的计时器,并给容器添加'rotate'类,触发旋转动画。然后,我们使用setTimeout函数设定了一个5秒的计时器,当计时器结束时,我们移除'rotate'类,图片就会恢复到初始状态。
注意,这个效果只在用户通过鼠标滚动页面时才会触发,如果用户在页面中间停止滚动,图片也会停止旋转。