js+css实现图片拼凑各种图形代码-html代码-BFW代码库

js+css实现图片拼凑各种图形代码

代码语言：html

代码描述：js+css实现图片拼凑各种图形代码

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

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Shape Mosaic — 图片形状拼图</title>
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Playfair+Display:wght@400;700&family=Noto+Sans+SC:wght@300;400;500;700&family=DM+Mono:wght@400;500&display=swap" rel="stylesheet">
    <style>
        *, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }

        :root {
            --bg: #0c0b09;
            --surface: #151311;
            --surface-2: #1d1a17;
            --surface-3: #252220;
            --border: #2e2a26;
            --accent: #c8963e;
            --accent-light: #dbb062;
            --accent-dim: rgba(200,150,62,0.12);
            --text: #e8e3da;
            --text-secondary: #a09888;
            --text-muted: #635d54;
            --font-display: 'Playfair Display', Georgia, serif;
            --font-body: 'Noto Sans SC', -apple-system, BlinkMacSystemFont, sans-serif;
            --font-mono: 'DM Mono', 'Courier New', monospace;
        }

        html, body { height: 100%; }

        body {
            font-family: var(--font-body);
            background: var(--bg);
            color: var(--text);
            overflow: hidden;
        }

        body::before {
            content: '';
            position: fixed;
            inset: 0;
            background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='1'/%3E%3C/svg%3E");
            opacity: 0.025;
            pointer-events: none;
            z-index: 9999;
        }

        /* ===== Layout ===== */
        #app {
            display: flex;
            flex-direction: column;
            height: 100vh;
        }

        header {
            padding: 16px 28px;
            border-bottom: 1px solid var(--border);
            display: flex;
            align-items: baseline;
            gap: 16px;
            flex-shrink: 0;
            background: var(--surface);
        }

        header h1 {
            font-family: var(--font-display);
            font-size: 22px;
            font-weight: 700;
            letter-spacing: 0.02em;
            background: linear-gradient(135deg, var(--accent-light), var(--accent));
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
        }

        header .subtitle {
            font-size: 13px;
            color: var(--text-muted);
            font-weight: 300;
        }

        .workspace {
            display: grid;
            grid-template-columns: 310px 1fr;
            flex: 1;
            overflow: hidden;
        }

        /* ===== Sidebar ===== */
        .sidebar {
            overflow-y: auto;
            padding: 20px;
            border-right: 1px solid var(--border);
            background: var(--surface);
            animation: fadeSlide 0.4s ease forwards;
        }

        @keyframes fadeSlide {
            from { opacity: 0; transform: translateX(-12px); }
            to { opacity: 1; transform: translateX(0); }
        }

        .sidebar::-webkit-scrollbar { width: 4px; }
        .sidebar::-webkit-scrollbar-track { background: transparent; }
        .sidebar::-webkit-scrollbar-thumb { background: var(--border); border-radius: 2px; }

        .section { margin-bottom: 26px; }
        .section:last-child { margin-bottom: 0; }

        .section-label {
            font-si.........完整代码请登录后点击上方下载按钮下载查看