开发者社区

文档建议反馈控制台

文章/答案/技术大牛

发布

随鼠标移动的漂亮动画js代码

要实现一个随鼠标移动的漂亮动画，可以使用JavaScript和CSS3来创建。以下是一个简单的示例代码，展示了如何实现这一效果：

HTML部分

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Mouse Move Animation</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <div class="circle"></div>
    <script src="script.js"></script>
</body>
</html>

CSS部分（styles.css）

body {
    margin: 0;
    overflow: hidden;
    background-color: #000;
}

.circle {
    position: absolute;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background-color: #ff6347;
    pointer-events: none; /* 确保圆圈不会干扰鼠标事件 */
    transition: transform 0.1s ease-out; /* 平滑过渡效果 */
}

JavaScript部分（script.js）

document.addEventListener('mousemove', function(event) {
    const circle = document.querySelector('.circle');
    const x = event.clientX;
    const y = event.clientY;

    // 添加一些随机性和缓动效果
    const offsetX = (Math.random() - 0.5) * 50;
    const offsetY = (Math.random() - 0.5) * 50;

    circle.style.transform = `translate(${x + offsetX}px, ${y + offsetY}px)`;
});

解释

HTML部分：创建了一个基本的HTML结构，包含一个div元素用于显示动画圆圈，并引入了CSS和JavaScript文件。
CSS部分：
- 设置body的背景为黑色，并移除默认的边距和滚动条。
- 定义了一个.circle类，设置了圆圈的大小、形状、颜色和位置属性。pointer-events: none;确保圆圈不会干扰鼠标事件。

JavaScript部分：
- 添加了一个mousemove事件监听器，当鼠标在页面上移动时触发。
- 获取鼠标当前的坐标（clientX和clientY）。
- 计算一个随机的偏移量，使圆圈的移动看起来更自然。
- 使用transform属性将圆圈移动到新的位置。

应用场景

用户界面增强：在网站或应用中增加互动性，吸引用户注意。
游戏开发：在游戏中实现动态效果，提升用户体验。
广告展示：在广告页面中使用此类动画吸引用户点击。

优势

简单易实现：使用基本的HTML、CSS和JavaScript即可完成。
高度自定义：可以根据需要调整圆圈的大小、颜色、移动速度等属性。
良好的兼容性：现代浏览器普遍支持这些技术。

通过这种方式，你可以创建一个简单而有趣的随鼠标移动的动画效果。如果需要更复杂的效果，可以进一步扩展JavaScript逻辑，添加更多的视觉元素和交互功能。

页面内容是否对你有帮助？

有帮助

没帮助

相关·内容

没有搜到相关的文章

热门标签

活动推荐

运营活动

活动名称

广告关闭