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>Photo Mosaic Studio · 形状拼图</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=Manrope:wght@300;500;700;800&family=Space+Grotesk:wght@500;700&display=swap" rel="stylesheet">
<style>
:root{
  --bg:#0f0a14;
  --bg-2:#15101c;
  --card:#1a1420;
  --card-2:#221a2b;
  --border:#2d2333;
  --border-2:#3a2d44;
  --fg:#f5ecf0;
  --muted:#9a8b95;
  --muted-2:#6b5e68;
  --accent:#ff5e8a;
  --accent-2:#ffa15e;
  --success:#6ee7b7;
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
body{
  font-family:'Manrope',-apple-system,system-ui,sans-serif;
  background:var(--bg);
  color:var(--fg);
  overflow:hidden;
  background-image:
    radial-gradient(ellipse at 15% 15%,rgba(255,94,138,0.18),transparent 45%),
    radial-gradient(ellipse at 85% 85%,rgba(255,161,94,0.13),transparent 50%),
    radial-gradient(ellipse at 50% 50%,rgba(110,231,183,0.05),transparent 60%);
}
body::before{
  content:"";
  position:fixed;inset:0;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.06 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
  opacity:.5;pointer-events:none;mix-blend-mode:overlay;
}

.app{display:grid;grid-template-columns:360px 1fr;height:100vh;position:relative;z-index:1}

/* === Sidebar === */
.sidebar{
  background:linear-gradient(180deg,rgba(26,20,32,.92),rgba(21,16,28,.92));
  backdrop-filter:blur(20px);
  border-right:1px solid var(--border);
  overflow-y:auto;
  padding:24px 22px 32px;
  scrollbar-width:thin;
  scrollbar-color:var(--border-2) transparent;
}
.sidebar::-webkit-scrollbar{width:6px}
.sidebar::-webkit-scrollbar-thumb{background:var(--border-2);border-radius:3px}

.brand{
  display:flex;align-items:center;gap:12px;
  padding-bottom:18px;margin-bottom:22px;
  border-bottom:1px solid var(--border);
}
.brand-mark{
  width:38px;height:38px;border-radius:11px;
  background:conic-gradient(from 220deg,var(--accent),var(--accent-2),var(--accent));
  display:grid;place-items:center;
  box-shadow:0 8px 24px -8px rgba(255,94,138,.6);
  position:relative;
}
.brand-mark::after{
  content:"";position:absolute;inset:5px;border-radius:7px;
  background:var(--card);
}
.brand-mark svg{position:relative;z-index:1}
.brand-name{font-family:'Space Grotesk';font-weight:700;font-size:18px;letter-spacing:.5px}
.brand-sub{font-size:11px;color:var(--muted);letter-spacing:2px;text-transform:uppercase;margin-top:2px}

.section{margin-bottom:22px}
.section-title{
  displ.........完整代码请登录后点击上方下载按钮下载查看