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

代码语言：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 { 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;
    }
    .ui-panel {
        position: fixed;
        z-index: 100;
        padding: 12px;
        border: 1px solid;
        border-radius: 16px;
        backdrop-filter: blur(12px);
        -webkit-backdrop-filter: blur(12px);
        box-shadow: 0 4px 30px rgba(0, 0, 0, 0.2);
        transition: background 1.5s ease, border-color 1.5s ease;
        display: flex;
        gap: 10px;
        align-items: center;
    }
    #ui-top-left {
        top: 20px;
        left: 20px;
        flex-wrap: wrap;
    }
    #ui-bottom-right {
        bottom: 20px;
        right: 20px;
        flex-direction: column;
        align-items: flex-end;
        gap: 15px;
    }
    .theme-btn {
        padding: 8px 16px;
        border: 1px solid rgba(255, 255, 255, 0.2);
        background: rgba(255, 255, 255, 0.1);
        color: rgba(255, 255, 255, 0.85);
        border-radius: 12px;
        cursor: pointer;
        transition: background 0.3s, border-color 0.3s, color 0.3s, transform 0.08s ease;
        font-size: 14px;
        font-weight: 300;
    }
    .theme-btn:hover { background: rgba(255, 255, 255, 0.2); border-color: rgba(255, 255, 255, 0.4); }
    .theme-btn:active { transform: scale(0.98); }
    .theme-btn.active { color: #fff; font-weight: 500; }
    .toggle-option { display: flex; align-items: center; gap: 10px; }
    .toggle-option label[for="anim.........完整代码请登录后点击上方下载按钮下载查看