html鼠标跟随粒子特效

HTML鼠标跟随粒子特效可以通过CSS和JavaScript实现。下面是一份示例代码：

HTML部分：

<div class="particles"></div>

CSS部分：

.particles {
  position: fixed;
  top: 0;
  left: 0;
  z-index: -1;
  width: 100%;
  height: 100%;
}

.particle {
  position: absolute;
  background-color: #fff;
  border-radius: 50%;
  opacity: 0.5;
}

JavaScript部分：

var particles = document.querySelector('.particles');

document.addEventListener('mousemove', function(e) {
  var x = e.pageX;
  var y = e.pageY;
  
  for (var i = 0; i < 5; i++) {
    var particle = document.createElement('div');
    particle.classList.add('particle');
    particles.appendChild(particle);
    
    var size = Math.random() * 10;
    particle.style.width = size + 'px';
    particle.style.height = size + 'px';
    particle.style.top = y + 'px';
    particle.style.left = x + 'px';
    
    var speed = Math.random() * 3;
    var angle = Math.random() * 360;
    var vx = Math.cos(angle) * speed;
    var vy = Math.sin(angle) * speed;
    
    animateParticle(particle, x, y, vx, vy);
  }
});

function animateParticle(particle, x, y, vx, vy) {
  var time = Math.random() * 1000 + 500;
  
  setTimeout(function() {
    particle.style.top = (y + vy * time / 1000) + 'px';
    particle.style.left = (x + vx * time / 1000) + 'px';
    particle.style.opacity = 0;
    
    setTimeout(function() {
      particles.removeChild(particle);
    }, 1000);
  }, time);
}

说明：
- HTML部分只需要一个空的div容器用于存放粒子元素。
- CSS部分定义了粒子容器和粒子元素的样式。
- JavaScript部分监听鼠标移动事件，并在鼠标位置生成多个粒子元素，然后让它们随机运动并逐渐消失。具体实现方式是通过setTimeout和计算粒子位置来模拟动画效果。