记录鼠标跟随效果

最新推荐文章于 2024-05-19 09:30:36 发布
最新推荐文章于 2024-05-19 09:30:36 发布
阅读量128 收藏
点赞数
分类专栏： h5c3
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_38395165/article/details/84957155
版权

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>
    <meta charset="utf-8" />
    <style type="text/css">
        body{   margin: 0;
                font-size: 16px;
                font-family: Roboto;
                overflow-x: hidden;
                background-color: #1a1a1a;
                color: #fff;width:100%;
                height: 1000px;
                cursor: url('js/point.png'),default!important;
            }
        .mouse-follower{                
            position: fixed;
            top: 0;
            left: 0;
            width: 0;
            height: 0;
            z-index: 9999;
            pointer-events: none;
            -webkit-backface-visibility: hidden;
            backface-visibility: hidden;
            mix-blend-mode: multiply;
            -webkit-transform: translate(-50%,-50%);
            -ms-transform: translate(-50%,-50%);
            transform: translate(-50%,-50%);
            -webkit-transition: top .15s ease-out,left .15s ease-out;
            -o-transition: top .15s ease-out,left .15s ease-out;
            transition: top .15s ease-out,left .15s ease-out;
    }
        .inner-mouse{
            width: 35px;
            height: 35px;
            -webkit-transform: translate(-50%, -50%);
            -ms-transform: translate(-50%, -50%);
            transform: translate(-50%, -50%);
            background: #ff45454f;
            border-radius: 50%;
            -webkit-backface-visibility: hidden;
            backface-visibility: hidden;
            opacity: 1;
            -webkit-transition: opacity 0.5s;
            -o-transition: opacity 0.5s;
            transition: opacity 0.5s;
            -webkit-box-shadow: 1px 3px 5px #d457578c;
            box-shadow: 1px 3px 5px #d457578c;
            -webkit-transition: background 0.5s, -webkit-box-shadow 0.5s;
            transition: background 0.5s, -webkit-box-shadow 0.5s;
            -o-transition: background 0.5s, box-shadow 0.5s;
            transition: background 0.5s, box-shadow 0.5s;
            transition: background 0.5s, box-shadow 0.5s, -webkit-box-shadow 0.5s;
        }
    </style>
    <script src="js/jquery.js"></script>
   
    <script>
        $(function () {。
            $(document).mousemove(function(e)   {
                $(".mouse-follower").css({ "position": "absolute", "left": e.pageX , "top": e.pageY });
            });  
        });
    </script>
</head>
<body>
    <div>
        <div class="mouse-follower">
            <div class="inner-mouse"></div>
        </div>
    </div>
</body>
</html>

Strugglexia
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
鼠标移动跟随效果
爱学习的豪豪的博客
08-28 384
实现鼠标跟随效果 代码： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge">
鼠标跟随效果
04-17
多种鼠标跟随效果整合，也是自己工作中常常用到，所以搜集了一波，现在免费分享给大家
跟随鼠标效果
weixin_43755513的博客
08-28 222
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-U...
探索令人惊叹的Cuberto Mouse Follower：为您的网站增添动态魅力
最新发布
gitblog_00046的博客
05-19 251
探索令人惊叹的Cuberto Mouse Follower：为您的网站增添动态魅力 项目地址:https://gitcode.com/Cuberto/mouse-follower 在创造独特用户体验的过程中，细微之处往往能产生出人意料的效果。Cuberto Mouse Follower 是一个强大的JavaScript库，它能够为您的网页上的鼠标指针添加平滑且引人入胜的视觉效果。这款库不仅易于集成...
_鼠标移动跟随效果
weixin_33923762的博客
12-12 159
<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>_鼠标移动跟随效果</title> <style> div { width: 50px; height: 50px; border-radius: 50%; pos...
鼠标跟随特效
m0_52128556的博客
07-27 1962
鼠标跟随 鼠标跟随效果，顾名思义，就是元素会跟随着鼠标的移动而作出相应的运动 代码 <style> body{ height:5000px; } div{width:50px; height:50px; background:red; border-radius:50%; position:absolute;} </style> js 代码 <script> window.onload = function(){
WinForm实现鼠标拖动控件跟随效果
08-27
在上面的代码中，我们可以看到作者使用了三个私有变量：Mousedown、CurX、CurY来记录鼠标的状态和位置。在MouseDown事件中，我们记录了鼠标的按下事件，并记录了鼠标的位置。在MouseMove事件中，我们使用Cursor....
Canvas点击跟随鼠标移动特效
06-24
如果跟随效果是粒子或者光线，可能还需要用到`arc()`来绘制圆形粒子，或者用`createLinearGradient()`或`createRadialGradient()`创建渐变效果。 此外，为了实现平滑的动画效果，通常会使用`requestAnimationFrame...
fengche.rar_windmill_跟随鼠标_跟随鼠标 移动
09-23
在IT行业中，交互式设计和动态效果是提升用户体验的重要手段，本项目"风车.rar_windmill_跟随鼠标_跟随鼠标 移动"就是一个生动的例子。这个项目的核心在于实现了一个能够跟随鼠标移动并根据鼠标移动速度改变转动速度...
5分钟实现Canvas鼠标跟随动画背景
12-09
3. **监听鼠标移动事件**：在鼠标移动时，记录鼠标位置并存入圆的数组。 ```javascript window.onmousemove = function(event) { var X = event.clientX; var Y = event.clientY; round_arr.push({X:X, Y:Y, ...
鼠标跟随窗体移动源代码
11-11
"鼠标跟随窗体移动源代码"就是一个这样的例子，它涉及到的是如何让鼠标的指针与窗体保持相对位置，即无论窗体如何在屏幕上移动，鼠标指针都会保持在窗体内的特定位置。这一功能常见于各种设计工具或者自定义窗口应用...
很酷的一个文字鼠标跟随效果
08-03
鼠标移动跟随柔美的文字，效果非常棒@演示地址http://www.58fla.com/code/flash/20160803/421.html
一个CSS+Js实现的鼠标跟随的图片提示效果
11-11
鼠标移动到图片上会提示信息，信息可以根据鼠标移动。兼容各浏览器
js小技巧 鼠标跟随图片
mahaopengphp的专栏
12-06 197
http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> http://www.w3.org/1999/xhtml"> 跟随鼠标的图片效果-懒人图库  body {   margin: 0px;   padding: 0px;   background: #000;   position: absolute;
实现鼠标追随效果
G_uan的博客
11-11 741
呈现效果： 1.页面中的gif动图跟随鼠标移动 2.元素随鼠标移动角度进行z轴旋转以及在方向上进行Y轴上的翻转 HTML代码部分 <head> <style> .img { width: 50px; height: 50px; background-image: url("goat.gif"); background-size: cover; ..
鼠标跟随炫酷效果
QingYun的博客
12-09 921
canvas画布上监听鼠标移动事件并画图，随机小球颜色，随机小球运动方向，当小球透明度到一定程度，清除小球 &lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;meta name="viewport" content=&qu
html--鼠标跟随特效
stqer的博客
04-26 1347
【代码】html--鼠标跟随特效。
分享86个鼠标特效，总有一款适合您
zy0412326的专栏
02-12 652
jQuery特效插件HoverSlippery实现导航超链接鼠标滑过动画。知识付费甚欢喜，为咱码农谋福利。44种CSS3鼠标滑过图片效果动画库imagehover.css。jquery鼠标实现跟随星星特效插件jquery-stars。9种css3圆形按钮hover鼠标经过动画效果。20种带配合场景的CSS3鼠标滑过文字动画特效。jQuery实现鼠标悬停导航底部动画效果。jQuery实现鼠标经过显示动画边框特效。
js实现跟随鼠标粒子效果
03-31
以下是一个简单的js代码实现跟随鼠标粒子效果： HTML： ```html <canvas id="canvas"></canvas> ``` CSS： ```css #canvas { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } ``` JS...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值