流光溢彩 (Neon Conic) · 特效源代码交互游乐场

实时源码编辑器 (HTML/CSS/JS) 支持 Tab 缩进
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>流光溢彩 · 独立调试版</title>
    <style>
        body, html {
            margin: 0;
            padding: 0;
            width: 100%;
            height: 100%;
            background: #090a10;
            overflow: hidden;
            font-family: system-ui, -apple-system, sans-serif;
        }
        
        .effect-container {
            width: 100%;
            height: 100%;
            position: relative;
            overflow: hidden;
            display: flex;
            align-items: center;
            justify-content: center;
        }
        
        /* 旋转霓虹底屏 - 覆盖满屏 */
        .neon-display {
            position: absolute;
            inset: 0;
            overflow: hidden;
            display: flex;
            align-items: center;
            justify-content: center;
            background: rgba(15, 15, 25, 0.6);
        }
        
        /* 锥形流光底层旋转 - 放大覆盖全屏 */
        .neon-display::before {
            content: "";
            position: absolute;
            top: -100%;
            left: -100%;
            width: 300%;
            height: 300%;
            background: conic-gradient(
                from 0deg,
                transparent 20%,
                #eeb068 40%,
                #ff7a7a 60%,
                transparent 80%,
                #eeb068 100%
            );
            animation: neon-rotate 8s linear infinite;
            z-index: 1;
        }
        
        /* 黑色中控盖板 - 稍微内缩留出边缘流光 */
        .neon-display::after {
            content: "CYBER CORE";
            position: absolute;
            inset: 8px; /* 8px的流光边框 */
            background: radial-gradient(circle at center, #141423 0%, #090a10 100%);
            z-index: 2;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 32px;
            font-weight: 900;
            color: #ffd29e;
            text-shadow: 0 0 20px rgba(238, 176, 104, 0.6);
            letter-spacing: 0.3em;
            transition: all 0.5s ease;
        }
        
        @keyframes neon-rotate {
            0% { transform: rotate(0deg); }
            100% { transform: rotate(360deg); }
        }
    </style>
</head>
<body>
    <div class="effect-container">
        <div class="neon-display"></div>
    </div>
</body>
</html>
实时渲染沙盒视窗 (Sandboxed Sandbox) 实时可交互