three实现三维线条五角星粒子消散汇聚动画效果代码-html代码-BFW代码库

three实现三维线条五角星粒子消散汇聚动画效果代码

代码语言：html

所属分类：粒子

代码描述：three实现三维线条五角星粒子消散汇聚动画效果代码

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">

  
  
</head>

<body translate="no">
  <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 .........完整代码请登录后点击上方下载按钮下载查看