随鼠标轨迹动画特效

原创

已于 2022-02-25 15:55:03 修改 · 807 阅读

标签

#动画 #css3 #css #html #javascript

收录于

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

本文介绍如何使用CSS3和JavaScript创建一个跟随鼠标移动的轨迹动画特效，通过结合HTML和CSS，实现视觉上的交互体验。主要涉及的技术包括CSS3的动画属性、事件监听以及JavaScript的坐标获取。

开发板推荐：天空星STM32F407VET6开发板

超高性价比 STM32主控 | 超高主频 | 一板兼容百芯 | 比赛神器 | 沉金彩色丝印

点击查看

<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";
            alldiv[i].style.top = alldiv[i-1].offsetTop + "px";
        }
        alldiv[0].styl

开发板推荐：天空星STM32F407VET6开发板

超高性价比 STM32主控 | 超高主频 | 一板兼容百芯 | 比赛神器 | 沉金彩色丝印

点击查看