

3 分钟看懂脉冲星崩解动画

码途钥匙

2025-09-02

· 点击蓝字，关注我们

效果图

一、HTML

如果把动画比作一座房子，HTML 就是负责搭建框架的 “地基” 和 “梁柱”。在 “脉冲星崩解” 效果中，HTML 的核心作用是定义页面的基础结构：首先创建一个全屏容器container，作为动画的 “舞台”；接着添加glow层实现光晕背景，再用ui-panel搭建交互控制面板，包含主题切换按钮、脉冲触发键和动画开关。这些标签就像一个个 “占位符”，明确了动画元素、交互组件的位置和作用，为后续 CSS 美化、JS 交互做好铺垫。简单说，HTML 的任务就是 “告诉浏览器：这里要放动画，这里要放按钮”，搭建起页面的基本轮廓。

二、CSS

有了骨架，就需要 CSS 来为动画 “化妆”，定义视觉风格和动态过渡效果。在这个案例中，CSS 的核心工作有两部分：一是主题美化，通过定义 “熔岩”“宇宙”“翡翠” 三种主题的渐变背景、边框颜色和光晕效果，让动画能一键切换视觉风格；二是交互反馈，为按钮添加 hover（悬停）、active（点击）状态的颜色变化，为开关按钮设计滑动动画，让用户操作时有清晰的视觉响应。此外，CSS 还通过overflow: hidden隐藏多余内容，用backdrop-filter实现面板模糊效果，让整体视觉更精致。简言之，CSS 负责 “让页面变好看”，同时控制元素的基础样式和简单过渡。

三、JS

如果说 HTML 是骨架、CSS 是颜值，那 JS 就是让动画 “活起来” 的灵魂，负责实现复杂动效和用户交互。在 “脉冲星崩解” 中，JS 的核心能力体现在三方面：一是创建 3D 场景，借助 Three.js 库构建粒子系统，生成 10000 个模拟脉冲星的粒子，并定义粒子的运动轨迹和颜色变化；二是实现动态效果，编写代码控制粒子的旋转、崩解与聚合，同时响应 “脉冲” 按钮 —— 点击时生成冲击波，长按则根据时长增强效果；三是联动主题切换，当用户选择不同主题时，JS 会同步更新粒子的颜色和光晕参数，让 CSS 与 JS 的效果无缝衔接。可以说，JS 负责 “让页面动起来”，通过代码逻辑驱动复杂动效，响应用户操作，实现 HTML 和 CSS 无法完成的动态交互。

四、代码

<!DOCTYPE html><html lang="zh">  <head>    <meta charset="UTF-8" />    <title>脉冲星崩解</title>  </head>  <body>    <style>      * {        margin: 0;        padding: 0;        box-sizing: border-box;      }      body {        overflow: hidden;        background-color: #000;        font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;        color: #fff;        transition: background 1.5s ease;      }      #container {        position: fixed;        top: 0;        left: 0;        width: 100%;        height: 100%;        overflow: hidden;      }      body.theme-molten {        background: linear-gradient(          180deg,          #000000 0%,          #100500 50%,          #1f0a00 100%        );      }      body.theme-molten .glow {        background: radial-gradient(          circle at 50% 50%,          rgba(255, 100, 0, 0.05) 0%,          rgba(200, 50, 0, 0.05) 50%,          transparent 65%        );      }      body.theme-molten .ui-panel {        background: rgba(50, 20, 10, 0.3);        border-color: rgba(255, 120, 50, 0.4);      }      body.theme-molten .theme-btn.active {        background: rgba(255, 100, 0, 0.5);        border-color: rgba(255, 100, 0, 0.7);      }      body.theme-molten .toggle-slider {        background: rgba(180, 80, 40, 0.4);      }      body.theme-molten input:checked + .toggle-slider {        background-color: rgba(255, 100, 0, 0.6);      }      body.theme-molten .toggle-slider:before {        box-shadow: 0 0 8px rgba(255, 150, 50, 0.8);      }      body.theme-cosmic {        background: linear-gradient(          180deg,          #000000 0%,          #050010 50%,          #0a001f 100%        );      }      body.theme-cosmic .glow {        background: radial-gradient(          circle at 50% 50%,          rgba(147, 112, 219, 0.05) 0%,          rgba(75, 0, 130, 0.05) 50%,          transparent 65%        );      }      body.theme-cosmic .ui-panel {        background: rgba(40, 20, 60, 0.3);        border-color: rgba(147, 112, 219, 0.4);      }      body.theme-cosmic .theme-btn.active {        background: rgba(147, 112, 219, 0.5);        border-color: rgba(147, 112, 219, 0.7);      }      body.theme-cosmic .toggle-slider {        background: rgba(147, 112, 219, 0.4);      }      body.theme-cosmic input:checked + .toggle-slider {        background-color: rgba(147, 112, 219, 0.6);      }      body.theme-cosmic .toggle-slider:before {        box-shadow: 0 0 8px rgba(170, 130, 230, 0.8);      }      body.theme-emerald {        background: linear-gradient(          180deg,          #000000 0%,          #001005 50%,          #001f0a 100%        );      }      body.theme-emerald .glow {        background: radial-gradient(          circle at 50% 50%,          rgba(0, 255, 127, 0.05) 0%,          rgba(46, 139, 87, 0.05) 50%,          transparent 65%        );      }      body.theme-emerald .ui-panel {        background: rgba(20, 60, 40, 0.3);        border-color: rgba(60, 179, 113, 0.4);      }      body.theme-emerald .theme-btn.active {        background: rgba(60, 179, 113, 0.5);        border-color: rgba(60, 179, 113, 0.7);      }      body.theme-emerald .toggle-slider {        background: rgba(60, 179, 113, 0.4);      }      body.theme-emerald input:checked + .toggle-slider {        background-color: rgba(60, 179, 113, 0.6);      }      body.theme-emerald .toggle-slider:before {        box-shadow: 0 0 8px rgba(100, 200, 150, 0.8);      }      .glow {        position: fixed;        top: 0;        left: 0;        width: 100%;        height: 100%;        pointer-events: none;        mix-blend-mode: screen;        opacity: 0.75;        transition: background 1.5s ease;      }