详细的写一个炫酷的网页特效
时间: 2023-11-27 11:54:35 浏览: 24
好的,我来给您介绍一个简单的炫酷网页特效:鼠标悬停3D旋转动画。
首先,我们需要准备一张图片作为动画的展示对象。这里我选用了一张飞机的图片作为示例。
接下来,我们需要在 HTML 中定义一个容器,用于展示图片和实现动画效果。
```
<div class="container">
<img src="plane.png" alt="plane">
</div>
```
然后,我们需要使用 CSS 对容器和图片进行样式设置,使其居中、宽高一致。
```
.container {
width: 300px;
height: 300px;
margin: 0 auto;
perspective: 1000px; /* 设置透视距离,实现3D效果 */
}
img {
width: 100%;
height: 100%;
object-fit: cover; /* 图片填充容器 */
}
```
接下来,我们需要使用 JavaScript 实现鼠标悬停时的3D旋转动画效果。
```
const container = document.querySelector('.container');
const img = document.querySelector('img');
let mouseX = 0, mouseY = 0;
container.addEventListener('mousemove', e => {
mouseX = (e.clientX - window.innerWidth / 2) / 10;
mouseY = (e.clientY - window.innerHeight / 2) / 10;
});
function render() {
requestAnimationFrame(render);
img.style.transform = `rotateY(${mouseX}deg) rotateX(${mouseY}deg)`;
}
render();
```
以上就是实现鼠标悬停3D旋转动画的代码实现,可以尝试在浏览器中查看效果。您可以根据需要对代码进行调整,实现更加炫酷的效果。