运维开发网

实现javascript鼠标拖尾效果

运维开发网 https://www.qedev.com 2022-05-06 16:08 出处:网络
这篇文章主要为大家详细介绍了javascript实现鼠标拖尾特效,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下

这篇文章主要为大家详细介绍了javascript实现鼠标拖尾特效,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下

鼠标特效需要使用timer setTimeout来生成节点,定时删除节点。生成的节点被赋予随机的宽度、高度和颜色,这样每个特效节点看起来都不一样。

注意:生成的节点需要设置绝对定位,使其与文档流分离,不影响页面中其他元素的位置。

代码示例:

lt;!DOCTYPE htmlgt;lt;html lang="en"gt; lt;headgt; lt;meta charset="UTF-8"gt; lt;meta http-equiv="X-UA-Compatible" content="IE=edge"gt; lt;meta name="viewport" content="width=device-width, initial-scale=1.0"gt; lt;titlegt;鼠标特效lt;/titlegt; lt;stylegt; * { 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); } } lt;/stylegt;lt;/headgt; lt;bodygt; lt;/bodygt; lt;/htmlgt;lt;scriptgt; document.addEventListener("mousemove", function(e) { var body = document.querySelector("body"); var span = document.createElement("span"); var x = e.offsetX var y = e.offsetY span.style.left = x + "px" span.style.top = y + "px"; console.log(x + "gt;gt;gt;" + 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) })lt;/scriptgt;

运行结果:


这就是本文的全部内容。希望对大家的学习有帮助,也希望大家能支持一下搜源网。


0

精彩评论

暂无评论...
验证码 换一张
取 消