文档建议反馈控制台
首页
学习
活动
专区
圈层
工具
MCP广场
文章/答案/技术大牛
发布

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

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

HTML部分

代码语言：txt
复制
<!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）

代码语言：txt
复制
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）

代码语言：txt
复制
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)`;
});

解释

  1. HTML部分：创建了一个基本的HTML结构，包含一个div元素用于显示动画圆圈，并引入了CSS和JavaScript文件。
  2. CSS部分：
    • 设置body的背景为黑色，并移除默认的边距和滚动条。
    • 定义了一个.circle类，设置了圆圈的大小、形状、颜色和位置属性。pointer-events: none;确保圆圈不会干扰鼠标事件。
  • JavaScript部分：
    • 添加了一个mousemove事件监听器，当鼠标在页面上移动时触发。
    • 获取鼠标当前的坐标（clientX和clientY）。
    • 计算一个随机的偏移量，使圆圈的移动看起来更自然。
    • 使用transform属性将圆圈移动到新的位置。

应用场景

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

优势

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

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

相关搜索:背景随鼠标移动jsjs图片随鼠标移动js实现文字随鼠标移动js随鼠标移动放大图片js实现图片随鼠标移动js jq随鼠标左右移动js图片随鼠标上下移动d3js图随鼠标移动漂亮的鼠标js无装饰的Perl/TK窗口随鼠标移动使用鼠标y移动的图像动画导航栏下的页面内容随CSS动画移动js制作随鼠标滚动的广告图片漂亮的js页面代码网页鼠标移到区域动画开始js代码js 动画的移动鼠标移上去显示动画边框的js代码设置JS宽度:切换有漂亮的动画鼠标单击时对象的动画(旋转、移动)js跟随鼠标移动的div
相关搜索:
页面内容是否对你有帮助？
有帮助
没帮助

相关·内容

    • 【愚公系列】《循序渐进Vue.js 3.x前端开发实践》019-案例：随鼠标移动的小球

    通过简单的动画和动态效果，我们可以为用户提供更生动的交互体验。本篇文章将通过一个具体的案例——“随鼠标移动的小球”，来演示如何使用 Vue 实现这一效果。...此外，我们还将介绍一些基本的 CSS 动画技巧，以提升整体效果。一、案例：随鼠标移动的小球1.HTML 部分移动事件处理函数const move = (event) => { ... }：这是鼠标移动时触发的事件处理函数，负责根据鼠标的位置更新 offsetX 和 offsetY 的值，从而控制小球的移动...4.总结代码逻辑Vue 应用创建：通过 createApp(config).mount("#Application") 创建并挂载了一个 Vue 应用，config 里面包含了 setup 函数，该函数定义了小球的当前位置以及鼠标移动时的事件处理逻辑...鼠标移动逻辑：当鼠标在 .container 容器内移动时，move 方法会更新小球的位置，确保小球的中心跟随鼠标移动，同时保证小球不会超出容器的边界。

    44410

    如何让你的 JS 代码写得更漂亮

    作者：会编程的银猪 www.renfed.com/2017/04/29/effective-js-optimize 网上有不少关于 JS 编写优化建议，这里我根据自己的经验提出一些比较有用的建议。...按强类型风格写代码 JS是弱类型的，但是写代码的时候不能太随意，写得太随意也体现了编码风格不好。...下面分点说明： （1）定义变量的时候要指明类型，告诉JS解释器这个变量是什么数据类型的，而不要让解释器去猜，例如不好的写法： var num, str, obj; 声明了三个变量，但其实没什么用...因为JS最终都会被解释成汇编的语言，汇编语言变量的类型肯定是要确定的，你把一个整型的改成了字符串，那解释器就得做一些额外的处理。...这样写也不太好，虽然它是符合JS语法的，但这种编码风格是不好的。使用你这个函数的人会有点无所适从，不敢直接进行加减乘除，因为如果返回字符串进行运算的话值就是NaN了。

    2.8K20

    wow~ 让网站动起来的动画库，真漂亮，再也不用写复杂的动画代码了~wow.js

    前言 越来越多的网站特效很漂亮，其中就有一种我很喜欢的动画，就是当滑动到某个元素的时候，元素就是出现动画效果，如：缩放、旋转、滑动等。...感觉很漂亮，之前在做企业站的时候，基本上都是自己手写的，有点麻烦而且效果也不是很好，最近发现了一款比较好用的动画库~~~~wow.js，可以轻松的网站具有这种特效。...感受一下吧 安装使用 Wow.js 的动画效果依赖于第三方库，官方推荐的是：Animate.css 当然也可以使用其它的动画库，需要配置一下 wowo.js。...引入动画库 引入并且使用 wow.js js/wow.min.js"></script...总结 wow.js 是一款不错的js特效库，可以方便的给元素添加上滑动出现的效果。大大提高了网站的美观和交互性，并且降低了开发时间和成本。

    2.5K10

    使用 Prism.js 实现漂亮的代码语法高亮

    给大家推荐一个代码高亮显示的东东，直接使用一个 JavaScript 库 —— Prism 是一款轻量、可扩展的代码语法高亮库，使用现代化的 Web 标准构建。 为什么选择 Prism.js ？...极致易用引用 prism.css 和 prism.js，使用合适的 HTML5 标签（code.language-xxxx），搞定！...天生伶俐语言的 CSS 类是可继承的，所以你只需定义一次就能应用到多个代码片段。轻如鸿毛代码压缩后只有 1.6KB。每添加一个语言平均增加 0.3-0.5KB，主题在 1KB 左右。...js"> 遵循 HTML5 标准，Prism 使用语义化的 元素和 元素来标记代码区块：...原创文章采用CC BY-NC-SA 4.0协议进行许可，转载请注明：转载自：使用 Prism.js 实现漂亮的代码语法高亮

    5.5K30

    代码分享：高亮显示鼠标移动到的用户窗体上的控件

    这是在vbaexpress.com上找到的一段代码，非常有意思，当鼠标移动到用户窗体中的控件上时，该控件会高亮显示。这可以让我们将用户窗体界面设计得更好。 示例效果如下图1所示。...图1 代码如下： '声明默认的颜色 Const D_Lbl_Def_Bac As Long = 10066329 Const D_Lbl_Def_Bor As Long = 5066061 Const...D_Lbl_Def_FoCol As Long = 16579836 '声明鼠标移动到标签上时显示的颜色 Const D_Lbl_Move_Bac As Long = 13750737 Const...' "移动到这里3" 标签 Dim D_Bo_Lbl_4 As Boolean ' "移动到这里4" 标签 '标签 1 的位置 Const D_L1_Top_Mi As Single = 30...MouseMove(ByVal Button As Integer, ByVal Shift As Integer, ByVal X AsSingle, ByVal Y As Single) '当鼠标移动时改变

    2K20

    Excel实战技巧65： 制作漂亮的用户窗体按钮——当鼠标移动到按钮上时高亮显示

    在很多场合，我们都能看到这样的效果，当鼠标移动到某个元素上面时，该元素会变成另外一种颜色，达到强调的效果。...下面，我们来实现当鼠标移动到用户窗体按钮上时，会使用颜色高亮显示，让用户窗体更生动，如下图1所示。 ? 其实，你在图1中看到的按钮并不是用户窗体内置的传统命令按钮，而是使用图像控件来制作的。...然后，使用VBA代码来根据鼠标的位置切换这两个图像的可见性，从而实现按钮的动态变化。 在Excel工作表中创建按钮图像 使用文本框在Excel中创建按钮图像。...复制一个刚才绘制的图像控件，如下图6所示。 ? 这个图像将代码鼠标不在按钮上时的状态。...编写代码 使用MouseMove事件来响应鼠标的动作，这个事件当鼠标移动到特定控件中时，执行其中的代码。

    12.3K20

    将JavaScript代码转换为漂亮的SVG流程图——js2flowchart

    js2flowchart 是一个可视化库，可将任何JavaScript代码转换为漂亮的SVG流程图。你可以轻松地利用它学习其他代码、设计你的代码、重构代码、解释代码。...index.js ? 我们直接在文本域中输入自己的代码，如下，左边会直接生成流程图，这只是一个简单的示例： ?...js2flowchart的特性以及适用场景（来自官网翻译） js2flowchart获取您的JS代码并返回SVG流程图，适用于客户端/服务器，支持ES6。...销毁修饰符，用于在方案上用一个形状替换代码块 自定义流树修改器支持创建自己的流修改器 流树忽略过滤器完全省略一些代码节点，如日志行 聚焦节点或整个代码逻辑分支突出显示方案的重要部分 模糊节点或整个代码逻辑分支以隐藏不太重要的东西...为有效JS语法简单描述的任何进程创建流程图 以上所有功能可以直接到github上详细了解，用法太多，这里就不在介绍了！

    7K40

    电商放大镜及动态边框效果

    本文长度为 2772 字，建议阅读 7 分钟 序   大家在网购的时候一定没少用过此功能吧~某宝某猫某东，在PC端所有商品的展示均是如此：鼠标放在缩略图上，旁边便会有细节图展示出来，并随鼠标移动展示相应缩略图细节...下面我用js(jq)来展示一下，并且加入一丢丢的动态边框效果。 效果 ?...环境及语言 html css js / jq 思路 放大镜 缩略图及细节图布局 鼠标划入事件：鼠标放在缩略图，出现小的蒙层和细节图；当鼠标移动，细节图随之变化 鼠标及蒙层边界判断处理 鼠标移除事件：隐藏蒙蒙层及细节图...动态边框 鼠标悬浮，边框出现 鼠标移除，边框消失 那么问题来了，细节图怎么随鼠标变化？...如果设置border，如何使其边框动画？如果周边设置4个div，那么不仅是需要js操控，并且无形之中增加了许多复杂度，与编程思想背道而驰。 那么我们还有别的办法来处理使边框动起来吗？

    2.5K20

    那些前端常用的网站插件

    创建漂亮的图表 Instantclick — 能够明显加速网站加载时间，鼠标 hover 时预加载资源 Chartist — 另一个图表库 Motio — 一个基于动画和平移的雪碧图库 Animsition... — CSS 实现动画过渡的 jQuery 插件 Barba.js — 流式页面过渡 TwentyTwenty — 一个对比图片的可视化 diff 工具 Vivus.js — 在 SVG 上绘制动画 Wow.js... — 滚动时展现动画 Scrolline.js — 页面滚动时显示滚动进度 Velocity.js — 快速流畅的 JavaScript 动画 Animate on scroll — 漂亮的页面滚动元素动画...keycode Sortable — 拖拽插件 Flexdatalist — 自动补全 Slideout.js — 移动应用侧滑导航 Jquerymy — 使用 jQuery 实现双向数据绑定 Cleave.js... — 实时格式化输入内容 Page — 客户端单页应用路由 Selectize.js — 用来添加 tag 的 Hybrid 选择框 Nice select — 创建漂亮的选择框的 jQuery 库 Tether

    6K50

    「Web Animation API 专题」用原生JS制作一个图片随机移动的动画

    Web Animation API 介绍 当我们谈及网页动画时，自然联想到的是 CSS3 动画、JS 动画、SVG 动画 等技术以及 jQuery.animate() 等动画封装库，根据实际动画内容设计去选择不同的实现方式...,然而，每个现行的动画技术都存在一定的缺点，如 CSS3动画必须通过JS去获取动态改变的值，一个动画效果分散在css文件和js文件里不好维护，setInterval 的时间往往是不精确的而且还会卡顿,引入额外的动画封装库也并非对性能敏感的业务适用...，封装移动动画。...好了今天的代码撸完了，js代码还不到50行(注：为了在手机端运行，引入了web-animations.min.js)，您可以点击阅读原文预览，笔者亲测在iPhone XS Max运行良好，由于没有其它手机...下一篇文章我将用不到20行的原生js代码纯手工撸一个漂亮的时钟，敬请期待...

    4.8K30

    总结100+前端优质库,让你成为前端百事通

    并且可以在 React、Vue、Angular 项目中使用 「Scroll Reveal」 零依赖，为 web 和移动浏览器提供了简单的滚动动画，以动画的方式显示滚动中的内容 「Kute.js」 一个强大高性能且可扩展的原生...「iscroll」 移动端使用的一款轻量级滚动插件 「swiper.js」 一款强大的 js 跨端触摸滑动插件 「MixItUp」 是用于 DOM 操作的高性能，无依赖库，使您能够使用精美的动画过滤，...After Effects 动画，并在移动设备和网络上呈现它们 鼠标/键盘相关 「KeyboardJS」 一个在浏览器中使用的库（与 node.js 兼容）.它使开发人员可以轻松设置键绑定和使用组合键来设置复杂的绑定...」 一个基于图像中的前 2 种主要颜色生成互补渐变背景的库 表单表格 「x-spreadsheet」 一个基于 web 的简单易用的表格插件 Css 相关库 hover.css 开箱即用的鼠标悬停动画...动画/动效果 Halogen 使用 React 的加载动画集合 react-loading 一款基于 react 的轻量级加载动画库, 支持按需导入, 开箱即用 react-move 漂亮的，数据驱动的

    4.7K20

    网页精美动效动画制作 按钮鼠标悬浮动效的注意点 02《炫彩网页 iVX 无代码动效动画制作》

    一、按钮动效的使用 在上一节中，我们创建了一个动效，但是并没有使用，在此我们给按钮设置一个悬浮事件，当鼠标悬浮在按钮之上后就调用该动效，点击按钮添加事件： 点击按钮添加事件后将会出现一个事件编辑框...，在事件编辑框中，选择触发时间为鼠标移入： 随后使用箭头选择对应的动效对象： 随后在选择动作时对应的选择重新播放即可： 此时将会出现一个回调时间，并不用理会： 最后点击预览按钮即可...： 二、动效需要注意的情况 此时我们预览后发现效果如下： 此时发现动效是有了，但是移动的感觉不是很对，我们再到这个按钮周围添加对应的按钮查看一下效果： 效果如下： 接着我们查看绝对项目下的动效使用...我们只需要使用事件即可更改： 在这里只需要在动效播放完毕后，在对应的动作中设置当前按钮的宽高即可，预览之后效果如下： 此时当鼠标移出并不会使其大小恢复，只需要增加一个动效，设置鼠标移出时返回其大小即可...，首先编辑动效，设置初始关键帧为变化时的宽高： 接着设置最后一个关键帧为第一次鼠标悬浮进入第一次按钮时的宽高： 接着选择按钮添加事件： 在鼠标移出事件中使用鼠标悬浮出的按钮的动效即可

    1.1K10
    点击加载更多

    相关资讯

    热门标签

    更多标签

    活动推荐

      运营活动

      活动名称
      广告关闭

      腾讯云开发者

      扫码关注腾讯云开发者

      扫码关注腾讯云开发者

      领取腾讯云代金券

      热门产品

      热门推荐

      更多推荐

      Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有

      深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 粤公网安备44030502008569号

      腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号

      领券