随鼠标轨迹动画特效

Red 1027

已于 2022-02-25 15:55:03 修改

阅读量546

点赞数 1

文章标签：动画 css3 css html javascript

于 2022-02-25 15:53:54 首次发布

本文链接：https://blog.csdn.net/red1027/article/details/123133300

版权

<html>
<head>
    <meta charset="UTF-8">
    <title>鼠标移动轨迹特效</title>
    <style>
        div{
            width: 10px;height: 10px;background: red;position: absolute;left: 0;top: 0;border-radius: 50%;
        }
    </style>
</head>
<body>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
</body>
<script>
    var alldiv = document.querySelectorAll("div");

    document.onmousemove = function(eve){
        var e = eve || window.event;
        // pageX/Y获取鼠标位置
        // 因为一个元素离开了原来的位置之后，原来的位置就找到不到了
        // 所以，需要先操作最后一个元素，找前一个元素的位置，此时前一个元素还没有开始移动，所以能找到原来的位置
        // 最后再操作第一个元素跟着鼠标走
        for(var i=alldiv.length-1;i>0;i--){
            alldiv[i].style.left = alldiv[i-1].offsetLeft + "px";

最低0.47元/天解锁文章

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

Red 1027

关注关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
随鼠标轨迹动画特效

<html><head> <meta charset="UTF-8"> <title>鼠标移动轨迹特效</title> <style> div{ width: 10px;height: 10px;background: red;position: absolute;left: 0;top: 0;border-radius: 50%; } </
复制链接

扫一扫