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>创意作品集 — 滚动特效</title>
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@200;300;400;500;600&family=Noto+Serif+SC:wght@400;500;600;700&display=swap" rel="stylesheet">
<style>
*,*::before,*::after{padding:0;margin:0;box-sizing:border-box}
:root{
  --bg:#050505;--card:#111;--border:rgba(255,255,255,.06);
  --text:#f0f0f0;--muted:#888;--accent:#c5a47e;
}
html{scroll-behavior:smooth}
body{
  font-family:'Inter','Noto Serif SC',sans-serif;background:var(--bg);color:var(--text);
  overflow-x:hidden;display:flex;flex-direction:column;align-items:center;
  -webkit-font-smoothing:antialiased;
}
::selection{background:var(--accent);color:#000}

/* ── Nav ── */
nav{
  position:fixed;top:0;left:0;right:0;z-index:100;
  padding:1.5rem 3rem;display:flex;justify-content:space-between;align-items:center;
  background:rgba(5,5,5,.5);backdrop-filter:blur(20px);
  transition:background .3s;
}
nav .logo{
  font-family:'Noto Serif SC',serif;font-size:1.2rem;
  font-weight:600;letter-spacing:.02em;
}
nav .logo span{color:var(--accent);font-weight:400}
nav ul{display:flex;gap:2.5rem;list-style:none}
nav ul a{
  font-size:.7rem;font-weight:500;letter-spacing:.15em;
.........完整代码请登录后点击上方下载按钮下载查看