javascript鼠标拖尾特效

鼠标特效需要使用定时器setTimeout在固定时间生成节点，删除节点，生成的节点赋予随机的宽高，随机颜色，使每个特效节点都看起来不一样

注意：生成的节点需要设置绝对定位，使其脱离文档流，不影响页面中其他元素的位置

代码示例：

<!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>* {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);}}</style>
</head><body></body></html>
<script>document.addEventListener("mousemove", function(e) {var body = document.querySelector("body");var span = document.createElement("span");var x = e.offsetXvar y = e.offsetYspan.style.left = x + "px"span.style.top = y + "px";console.log(x + ">>>" + y)var a = Math.random() * 30;span.style.width = 30 + a + "px";span.style.height = 30 + a + "px";body.appendChild(span);setTimeout(function() {span.remove();// console.log("ok")}, 4500)})
</script>

运行结果：

了解更多关于javascript

javascript鼠标拖尾特效相关推荐

使用css和js实现鼠标拖尾特效
一实现步骤解析: 1.这原本是一个鼠标后面跟随一串英文字母的效果, 2.后来我就想,运用随机数字母的颜色做成彩色的, 3.并且每一个字母的色彩是随机分配而不是我自己手动填写的. 二 css: 1.为 ...
使用css和js实现鼠标拖尾特效（七彩泡泡）
( 此文章是转载,由于急于使用忘记作者链接.作者看到后可提供出处.) 一 css样式 <style>*{margin:0;padding:0;}body{overflow:hidden;} ...
Android Studio Canvas 实现鼠标贝塞尔曲线拖尾特效
Android Studio Canvas 实现鼠标贝塞尔曲线拖尾特效特效预览图什么是贝塞尔曲线? 百度百科: 贝塞尔曲线(Bézier curve),又称贝兹曲线或贝济埃曲线,是应用于二维图 ...
Android Studio Canvas 实现鼠标贝塞尔曲线拖尾特效（富文本编辑器）
特效预览图什么是贝塞尔曲线? 百度百科: 贝塞尔曲线(Bézier curve),又称贝兹曲线或贝济埃曲线,是应用于二维图形应用程序的数学曲线.一般的矢量图形软件通过它来精确画出曲线,贝兹曲线由线段 ...
html鼠标拖尾效果,javascript canvas拖尾效果
{$title} var lujinglist = []; //制作路径 for (var x = 10; x <= 300; x++) { var dian = [x, 50]; lujing ...
javascript鼠标拖拽的那些事情
<html> <head> <title>javascript鼠标拖拽的那些事情</title> <meta http-equiv="C ...
shader拖尾_u3d拖尾特效组件-------TrailRenderer
1.TrailRenderer 简介 1.1简介 TrailRenderer,拖尾渲染器,作用是用于渲染显示"拖尾特效". 拖尾:物体后面拖着的尾巴,现实生活中存在的拖尾比如流星拖 ...
王者服务器维护7月九号,王者荣耀S20赛季确定7月9号开始，钻石夺宝新增猛男专用拖尾特效...
原标题:王者荣耀S20赛季确定7月9号开始,钻石夺宝新增猛男专用拖尾特效明天王者荣耀周二例行更新,本次更新中会开启对战几率掉落永久英雄活动.赛季末段位冲刺活动,同时钻石夺宝新增一个全新的拖尾特效.这 ...
Unity插件篇：Pocket RPG Weapon Trails（武器拖尾特效）部分解读以及基本用法
我们平时开发游戏,有时会想要实现武器拖影特效,就像这样. 这个双刀流的小老头已经很全面的诠释了什么是武器拖尾.其实Unity自带了拖尾组件但他有很大的局限性,当目标仅进行移动,转弯的时候,它是可以胜 ...

javascript鼠标拖尾特效

javascript鼠标拖尾特效相关推荐

最新文章

热门文章