| 本文实例为大家分享了一个鼠标滑动撒爱心的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 
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持51zixue.net。
下载地址:
JS 基本概念详细介绍
js正则格式化日期时间自动补0的两种解法 |
