<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>鼠标过处创建烟雾</title><style>* {margin: 0;padding: 0;box-sizing: border-box;}body {display: flex;justify-content: center;align-items: center;min-height: 100vh;background: #111;}.btn {position: relative;padding: 20px 40px;background: #3498db;color: #fff;text-transform: uppercase;border-radius: 5px;font-size: 3em;cursor: pointer;overflow: hidden;}.particle {position: absolute;width: 8px;height: 8px;border-radius: 50%;background-color: #fff;pointer-events: none;opacity: 1;animation: animate 1s ease-in-out forwards;}@keyframes animate {to {opacity: 0;transform: translate(var(--tx), var(--ty)) scale(5);}}}</style>
</head>
<body><button class="btn" id="btn">smoke</button><script>let btn = document.getElementById('btn');btn.addEventListener('mousemove', e => {let rect = btn.getBoundingClientRect();let x = e.clientX - rect.left;let y = e.clientY - rect.top;let particleCount = 20;for (let index = 0; index < particleCount; index++) {createParticle(x, y);}});function createParticle(x, y) {let particle = document.createElement('div');particle.classList.add('particle');particle.style.left = `${x}px`;particle.style.top = `${y}px`;let angel = Math.random() * 2 * Math.PI;let distance = Math.random() * 80 + 20;let tx = Math.cos(angel) * distance;let ty = Math.sin(angel) * distance;particle.style.setProperty('--tx', `${tx}px`);particle.style.setProperty('--ty', `${ty}px`);btn.appendChild(particle);setTimeout(() => {particle.remove();}, 1000);}</script>
</body>
</html>
