首页html鼠标跟随特效代码

html鼠标跟随特效代码

时间: 2023-10-10 10:14:16 浏览: 105

以下是一个简单的 HTML 鼠标跟随特效代码： ```html <!DOCTYPE html> <html> <head> <title>Mouse Follow Effect</title> <style> body { overflow: hidden; } #container { position: relative; height: 100vh; background: linear-gradient(to bottom, #0099cc, #003d66); } #follower { position: absolute; width: 50px; height: 50px; background: #fff; border-radius: 50%; transform: translate(-25px, -25px); transition: transform 0.1s ease-out; pointer-events: none; } </style> </head> <body> <div id="container"> <div id="follower"></div> </div> <script> document.addEventListener("mousemove", function(e) { var follower = document.getElementById("follower"); var x = e.clientX; var y = e.clientY; follower.style.transform = "translate(" + x + "px," + y + "px)"; }); </script> </body> </html> ``` 这个特效会在鼠标移动时，在页面上显示一个跟随鼠标的小球。你可以通过修改 CSS 样式来改变小球的外观，也可以通过修改 JavaScript 代码来改变小球的运动轨迹。