javascript实现鼠标拖尾特效 javascript实现鼠标拖尾特效

鼠标特效需要使用定时器setTimeout在固定时间生成节点，删除节点，生成的节点赋予随机的宽高，随机颜色，使每个特效节点都看起来不一样
注意：生成的节点需要设置绝对定位，使其脱离文档流，不影响页面中其他元素的位置
代码示例：

鼠标特效 - 锐客网* {margin: 0; padding: 0; }body {background-color: #9df; overflow: hidden; height: 100vh; }span {height: 30px; width: 30px; border-radius: 50%; position: absolute; pointer-events: none; transform: translate(-50%, -50%); box-shadow: 10px 10px 30px #45f, -10px -10px 30px #d80; animation: box 5s linear infinite; z-index: 3; }@keyframes box {0% {transform: translate(-50%, -50%); opacity: 1; filter: hue-rotate(0deg); }100% {transform: translate(-50%, -1000%); opacity: 1; filter: hue-rotate(720deg); }}

运行结果：