原生JS实现鼠标滑动撒爱心特效原生JS实现鼠标滑动撒爱心特效

本文实例为大家分享了一个鼠标滑动撒爱心的js特效，效果如下：

文章图片

以下是代码实现，欢迎大家复制粘贴和收藏。

原生JS实现鼠标滑动撒爱心特效 - 锐客网* {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); }}

以下是上面代码中引入的图片heart.png