JS鼠标滑动撒爱心特效 原生JS实现鼠标滑动撒爱心特效
aiguangyuan 人气:0想了解原生JS实现鼠标滑动撒爱心特效的相关内容吗,aiguangyuan在本文为您仔细讲解JS鼠标滑动撒爱心特效的相关知识和一些Code实例,欢迎阅读和指正,我们先划重点:js鼠标滑动撒爱心,js鼠标撒爱心,js鼠标滑动,下面大家一起来学习吧。
本文实例为大家分享了一个鼠标滑动撒爱心的js特效,效果如下:
以下是代码实现,欢迎大家复制粘贴和收藏。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>原生JS实现鼠标滑动撒爱心特效</title> <style> * { margin: 0; padding: 0; font-family: '微软雅黑', sans-serif; } body { height: 100vh; background: #000; overflow: hidden; } span { position: absolute; background: url(heart.png); pointer-events: none; width: 100px; height: 100px; background-size: cover; transform: translate(-50%, -50%); animation: animate 2s linear infinite; } @keyframes animate { 0% { transform: translate(-50%, -50%); opacity: 1; filter: hue-rotate(0deg); } 100% { transform: translate(-50%, -1000%); opacity: 0; filter: hue-rotate(360deg); } } </style> </head> <body> <script> document.addEventListener('mousemove', (e) => { let body = document.querySelector('body') let heart = document.createElement('span') let x = e.offsetX let y = e.offsetY heart.style.left = x + 'px' heart.style.top = y + 'px' let size = Math.random() * 100 heart.style.width = size + 'px' heart.style.height = size + 'px' body.appendChild(heart) setTimeout(() => { heart.remove() }, 3000) }) </script> </body> </html>
以下是上面代码中引入的图片heart.png
加载全部内容