鼠标跟随动画

最新推荐文章于 2023-11-09 17:00:40 发布
最新推荐文章于 2023-11-09 17:00:40 发布
阅读量239 收藏 1
点赞数 2
文章标签： 前端
原文链接：https://blog.csdn.net/Qing_0124/article/details/124401234
版权 
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>鼠标跟随动画</title>
    <style>
        body {
            /* background: #111; */
            /* 超出屏幕的不显示 */
            overflow: hidden;
        }

        span {
            z-index:9999;//显示置于最顶部
            position: absolute;
            /* 禁用 */
            pointer-events: none;
            animation: fadeInOut 1s linear infinite;
        }

        @keyframes fadeInOut {

            0%,
            100% {
                opacity: 1;
            }

            20%,
            80% {
                opacity: 1;
            }
        }

        span:before {
            content: '';
            position: absolute;
            width: 16px;
            height: 16px;
            background: url(./getRich.png);
            /* 让图片填满设置的框子大小 */
            background-size: cover;
            animation: moveShape 1s linear infinite;
        }

        @keyframes moveShape {
            0% {
                transform: translate(0) rotate(0deg);
            }

            100% {
                transform: translate(100px) rotate(360deg)
            }
        }
    </style>
</head>

<body>

</body>

</html>
<script>
    document.addEventListener('mousemove', function (e) {
        let body = document.querySelector("body")
        let star = document.createElement("span")
        star.style.left = e.offsetX + "px"
        star.style.top = e.offsetY + "px"
        body.appendChild(star)
        setTimeout(() => {
            star.remove()
        }, 300)
    })
</script>
赵啸林
关注
  • 2
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
html++鼠标跟随动画,5分钟实现Canvas鼠标跟随动画背景
weixin_29243279的博客
06-07 525
关于Canvas制作炫酷背景，我会在git上不定时去更新，并会附上详细的解析，如果有喜欢的话，可以到git上瞧瞧前言相信很多前端小白都看过这样的背景动画，也好奇如何去实现这种效果！将这种效果应用到自己的个人网站上，会让整个网站变得与众不同！下面我会直击重点，用最短的时间，使用Canvas制作鼠标跟随动画如何制作动画常用的绘图动画的方式有以下几种：CSS3SVGCanvasWebGL让我们先分析分析...
5种炫酷js鼠标跟随动画特效插件
12-10
这是一款炫酷js鼠标跟随动画特效插件。该js插件提供了5种鼠标跟随的动画特效，使用非常简单，效果非常炫酷。
纯css3人物头像鼠标跟随动画效果
07-31
纯css人物头像鼠标跟随动画效果是一款鼠标移动可以控制人物头像跟眼睛转动特效。
5分钟实现Canvas鼠标跟随动画背景
12-09
关于Canvas制作炫酷背景，我会在git上不定时去更新，并会附上详细的解析，如果有喜欢的话，可以到git上瞧瞧 gitHub传送门 前言 相信很多前端小白都看过这样的背景动画，也好奇如何去实现这种效果！将这种效果应用到自己的个人网站上，会让整个网站变得与众不同！   下面我会直击重点，用最短的时间，使用 Canvas 制作 鼠标跟随动画  如何制作动画 常用的绘图动画的方式有以下几种： CSS3 SVG Canvas WebGL 让我们先分析分析这些方法的优劣性 CSS3 通过css3的关键帧等方式实现动画效果，看起来好像挺实用，但这样增加了一个没有
前端实现鼠标跟随动画
09-27
内含五种前端实现鼠标跟随动画的实现代码，鼠标移动，页面显示动画效果，也可在此基础上自定义动画效果，亲测有效
Revit二次开发知识分享（二十四）实现鼠标可视化跟随动画效果
包包熊的博客
03-23 1330
群友询问：怎样子实现在批量选择完管道，在点击放置标签时，想有一个可视化跟随的动画效果。然后研究了一番，下面提供了一个简易版的实行方案，大家可以参考学习。
Canvas 鼠标跟随动画 Demo
paopao_pop的博客
06-03 147
附上代码。
[css3] 动画案例---会呼吸的圆
qq_14993591的博客
08-17 1955
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Do
（web前端每日一练）用JavaScript制作一个跟随鼠标的小球炫彩动画 /doge/doge
Asen-coder的博客
04-30 2267
(web前端每日一练) 使用Javascript制作一个跟随鼠标特效，动态生成美丽的小球
彩色圆点气泡跟随 鼠标光标动画特效
m0_49681744的博客
09-05 808
彩色圆点气泡跟随 鼠标光标动画特效 效果图如下： 泡泡会根据鼠标的移动在鼠标下方会生成泡泡 然后缓缓上升。 可以父子以下代码看一下实际效果。 1、下面是HTML结构 HTML结构很简单，主要是靠css和一点js去实现 <body> <div> 光标移动查看 </div> <!-- <span></span> --> <script src="script.js" ></script> </.
漂亮的鼠标追踪效果
08-05
鼠标移动就会有漂亮的追踪效果，就像流星一样。
js轨迹跟踪（动画轨迹，记录鼠标点击过的坐标点）
08-10
js轨迹跟踪（动画轨迹，记录鼠标点击过的坐标点）
canvas跟随鼠标移动动画
最新发布
weixin_72923430的博客
11-09 157
canvas动画就是一遍一遍的重绘 需要对每次重绘的下一个位置进行计算。
html5跟随鼠标炫酷网站引导页动画特效
weixin_34150503的博客
12-07 1916
html5跟随鼠标炫酷网站引导页动画特效一款非常不错的引导页，文字效果渐变，鼠标跟随出绚丽的条纹。html5炫酷网站引导页，鼠标跟随出特效。体验效果：http://hovertree.com/texiao/html5/   另外推荐一款类似特效： http://www.cnblogs.com/roucheng/p/layermenu.html效果图：以下是源代码： 1 &lt;!D...
canvas实现粒子跟随鼠标动画
qq_40710974的博客
06-26 1096
canvas是前端绘制图形的好帮手，不少大牛的博客也会精心的用canvas绘制炫酷的背景。图形与可视化界面就是前端最好的名片，泡妞之前尚且知道要梳个靓头精心打扮，而canvas就是你装点门面与大牛平齐，脱颖而出的绝佳神器。...
php鼠标跟随特效,使用JS实现气泡跟随鼠标移动动画特效实例详解
weixin_35890184的博客
03-24 230
气泡跟随鼠标移动，并在每次点击时产生不同的变化，效果非常迷人，下面小编给大家带来了，基于js实现的气泡效果实例代码，需要的朋友参考下吧气泡跟随鼠标移动，并在每次点击时产生不同的变化效果如下简单的气泡效果body{background-color:#000000;margin:0px;overflow:hidden}var canvas = document.createElement('canva...
鼠标动画---充电插头效果
大白兔奶糖的博客
11-04 91
鼠标动画---充电插头效果
跟随鼠标的粒子动画
AGCA_ZXL的博客
01-15 646
一、效果图： 二、需要使用到的技术 1、HTML5 Canvas 标签定义图形，用于图形的绘制，通过脚本 (通常是JavaScript)来完成。 可以在画布上（Canvas）画一个红色矩形，渐变矩形，彩色矩形，和一些彩色的文字。 2、window.requestAnimationFrame() 告诉浏览器——你希望执行一个动画，并且要求浏览器在下次重绘之前调用指定的回调函数更新动画。该方法需要传入一个回调函数作为参数，该回调函数会在浏览器下一次重绘之前执行。比如：window.request.
写一个web作业，登陆注册页面，实时显示时间，轮播图、手风琴效果图、数据删除提示、登陆验证码、鼠标跟随动画、活动倒计时、背景加鼠标移动时的变化，包含背景音乐自动播放
06-07
好的，这个任务比较复杂，需要用到多种技术。您可以按照以下步骤来实现： 1. 创建一个 HTML 文件，包含登陆注册表单、轮播图、手风琴效果图、数据删除提示、登陆验证码、鼠标跟随动画、活动倒计时、背景加鼠标移动时的变化和背景音乐自动播放。 ```html <!DOCTYPE html> <html> <head> <title>登陆注册页面</title> <style> /* 样式 */ </style> </head> <body> <h1>登陆</h1> <form> <!-- 表单内容 --> </form> <h1>注册</h1> <form> <!-- 表单内容 --> </form> <div id="slider"> <!-- 轮播图内容 --> </div> <div id="accordion"> <!-- 手风琴效果图内容 --> </div> <div id="data-table"> <!-- 数据表格内容 --> </div> <div id="login-captcha"> <!-- 登陆验证码内容 --> </div> <div id="mouse-follow"> <!-- 鼠标跟随动画内容 --> </div> <div id="countdown"> <!-- 活动倒计时内容 --> </div> <div id="background"> <!-- 背景音乐自动播放内容 --> </div> </body> </html> ``` 2. 在 HTML 文件中添加 CSS 样式，可以设置表单的样式、轮播图的样式、手风琴效果图的样式、数据删除提示的样式、登陆验证码的样式、鼠标跟随动画的样式、活动倒计时的样式、背景加鼠标移动时的变化的样式和背景音乐自动播放的样式。 ```css /* 表单样式 */ #slider { /* 轮播图样式 */ } #accordion { /* 手风琴效果图样式 */ } #data-table { /* 数据表格样式 */ } #login-captcha { /* 登陆验证码样式 */ } #mouse-follow { /* 鼠标跟随动画样式 */ } #countdown { /* 活动倒计时样式 */ } #background { /* 背景音乐自动播放样式 */ } ``` 3. 在 HTML 文件中添加 JavaScript 代码，实现实时显示时间、轮播图、手风琴效果图、数据删除提示、登陆验证码、鼠标跟随动画、活动倒计时、背景加鼠标移动时的变化和背景音乐自动播放的功能。 ```javascript // 实时显示时间 function updateTime() { const now = new Date(); const timeEl = document.getElementById("time"); timeEl.innerText = now.toLocaleString(); } setInterval(updateTime, 1000); // 实现轮播图 // ... // 实现手风琴效果图 // ... // 实现数据删除提示 // ... // 实现登陆验证码 // ... // 实现鼠标跟随动画 // ... // 实现活动倒计时 // ... // 实现背景加鼠标移动时的变化 // ... // 实现背景音乐自动播放 const audio = new Audio("background-music.mp3"); audio.play(); ``` 这样就完成了一个包含多种功能的登陆注册页面。但是，这个任务比较复杂，需要用到多种技术，需要花费一些时间和精力来实现。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值