点击星光（点击任意位置绽放星芒粒子特效）

效果演示（真实可交互）

在演示区任意位置点击，会从落点绽放出一圈四角星芒：先是中心一道白色闪光，紧接着 10-15 颗彩色小星向四周飞散并逐渐缩小淡出。每颗星的飞散角度、距离、大小、颜色与延迟都是随机的，连点多次会叠加出星云般的层次，适合做按钮反馈、点赞彩蛋或空白区域装饰。

完整代码

HTML（演示区容器）：

<div class="cs-demo" id="area">点击这里</div>

CSS（星形用 clip-path 纯 CSS 绘制，动画用自定义属性传参）：

.cs-star {
  position: absolute; width: var(--s); height: var(--s);
  background: var(--c);
  clip-path: polygon(50% 0, 62% 38%, 100% 50%, 62% 62%,
                     50% 100%, 38% 62%, 0 50%, 38% 38%);  /* 四角星 */
  transform: translate(-50%, -50%) scale(0);
  animation: cs-fly .7s ease-out forwards;
  pointer-events: none;
}
@keyframes cs-fly {
  from { transform: translate(-50%, -50%) scale(1); opacity: 1; }
  to   { transform: translate(calc(-50% + var(--dx)),
                              calc(-50% + var(--dy))) scale(.15); opacity: 0; }
}

JS（pointerdown 生成粒子，动画结束自动移除，约 30 行）：

const area = document.getElementById('area');
const COLORS = ['#ffd76e', '#ff9f68', '#7ee8fa', '#b18cff', '#8affc1'];

area.addEventListener('pointerdown', (e) => {
  const rect = area.getBoundingClientRect();
  const x = e.clientX - rect.left, y = e.clientY - rect.top;
  const count = 10 + Math.floor(Math.random() * 5);
  for (let i = 0; i < count; i++) {
    const s = document.createElement('span');
    s.className = 'cs-star';
    const angle = (Math.PI * 2 * i) / count + Math.random() * 0.6;
    const dist = 38 + Math.random() * 60;
    s.style.left = x + 'px';
    s.style.top = y + 'px';
    s.style.setProperty('--dx', Math.cos(angle) * dist + 'px');
    s.style.setProperty('--dy', Math.sin(angle) * dist + 'px');
    s.style.setProperty('--s', 5 + Math.random() * 6 + 'px');
    s.style.setProperty('--c', COLORS[i % COLORS.length]);
    area.appendChild(s);
    s.addEventListener('animationend', () => s.remove());
  }
});

核心思路：每次点击动态创建一组 span，用 --dx、--dy 自定义属性把随机飞散向量写进 CSS 动画；粒子位移、缩放、透明度全部由 GPU 合成，动画结束立即从 DOM 移除，不会堆积节点。星形用 clip-path 多边形绘制，无需 SVG 或图片。

参数说明

兼容性与性能

• 依赖 clip-path 与 CSS 自定义属性，Chrome 55+ / Safari 9.1+ / Firefox 54+ / Edge 全支持；clip-path 在极老浏览器会退化为方形粒子，不影响功能
• 粒子仅用 transform 与 opacity 动画，合成器处理，连点 10 次也不会卡顿
• 每个粒子动画结束即被移除，页面不会残留 DOM；事件使用 pointerdown，桌面与移动端统一响应
• 若只想在按钮上使用，把监听目标换成按钮容器，并确保按钮有 position: relative 与 overflow: hidden

常见问题

Q: 点击时粒子没有出现在手指位置？ 检查坐标计算是否减去了容器的 getBoundingClientRect 偏移；如果监听对象不是点击区域本身，还要确认粒子 append 到了与坐标同坐标系的那个容器。

Q: 粒子飞散后留下残影或卡顿？ 确认动画结束后有 remove 回收逻辑；粒子动画时长偏长或数量偏多也会造成视觉残留，建议按上表参数调优。

Q: 想换成爱心、雪花等其他形状？ 只需替换 clip-path 的多边形顶点坐标，或者给粒子换成 emoji 文本内容，其余逻辑完全不用动。

Q: 能商用吗？ 可以。本组件为粤喵自研原创实现，免费商用无需署名。