本源码是一个暗色主题的摄影相册画廊单页模板，专为摄影师与视觉创作者打造。页面采用 CSS Columns 多列布局实现马赛克瀑布流效果，每张图片保持原始比例排列，视觉节奏自然流畅。
设计上以深邃黑底为画布，配合渐变色占位图块模拟不同摄影题材（城市/自然/人像/静物/黑白）。鼠标悬停时图片微微放大并叠加半透明遮罩，浮现作品标题、拍摄地点与镜头参数信息。顶部设有分类筛选标签栏（全部/城市/自然/人像/静物/黑白），底部有社交媒体链接入口。
适合摄影师搭建在线作品集、摄影爱好者分享旅行照片、设计师展示 UI 截图与 mockup。将占位渐变块替换为真实 标签即可投入使用，也可接入灯箱插件实现点击放大查看功能。
使用教程
1. 下载与保存
将下方 HTML 源码全部复制，保存为 index.html 文件（注意文件后缀必须是 .html）。
2. 本地预览
直接双击 index.html 文件，浏览器会自动打开并渲染页面效果。也可以在文件夹内运行 python -m http.server 后访问 localhost:8000 进行预览。
3. 自定义修改
替换文字：直接编辑 HTML 中的标题、段落文本与链接。调整配色：修改 <style> 标签内的 CSS 变量（:root 部分）或具体颜色值。更换图片：将 <img> 的 src 属性换成你自己的图片地址，或将背景渐变替换为 background-image。
4. 上线部署
将 index.html 上传到任意支持静态网页托管的服务（GitHub Pages、Vercel、Netlify、阿里云 OSS、腾讯云 COS 等）即可获得独立访问网址。
HTML 源码
复制下方完整代码，保存为 .html 文件即可在浏览器中预览使用。
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>光影集 · 摄影相册画廊</title>
<style>
:root{--bg:#111214;--card:#191b1f;--line:#2a2d33;--txt:#f2f3f5;--sub:#9aa0aa;--accent:#e9c46a}
*{margin:0;padding:0;box-sizing:border-box}
body{font-family:"PingFang SC","Microsoft YaHei","Segoe UI",system-ui,sans-serif;background:var(--bg);color:var(--txt);line-height:1.7}
a{color:inherit;text-decoration:none}
.wrap{max-width:1200px;margin:0 auto;padding:0 22px}
header{padding:56px 0 28px;text-align:center;border-bottom:1px solid var(--line)}
.brand{display:inline-flex;align-items:center;gap:10px;font-size:13px;letter-spacing:5px;color:var(--accent);margin-bottom:16px}
.brand::before,.brand::after{content:"";width:34px;height:1px;background:var(--accent);opacity:.6}
header h1{font-size:clamp(30px,5vw,44px);font-weight:800;letter-spacing:6px}
header p{color:var(--sub);max-width:520px;margin:14px auto 0;font-size:15px}
.filters{display:flex;gap:8px;justify-content:center;flex-wrap:wrap;padding:26px 0 6px}
.filters span{padding:7px 18px;border:1px solid var(--line);border-radius:999px;font-size:13.5px;color:var(--sub);cursor:default;transition:.22s}
.filters span:hover,.filters span.on{background:var(--accent);color:#141414;border-color:var(--accent);font-weight:600}
/* Masonry via columns */
.grid{columns:4 260px;column-gap:16px;padding:26px 0 40px}
figure{break-inside:avoid;margin:0 0 16px;position:relative;border-radius:14px;overflow:hidden;background:var(--card);border:1px solid var(--line);cursor:pointer}
.ph{position:relative;display:block;width:100%}
.ph::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 45%,rgba(0,0,0,.72));opacity:0;transition:.32s}
figure:hover .ph::after{opacity:1}
figure img,figure .fake{display:block;width:100%;height:auto;transition:.5s}
figure:hover img,figure:hover .fake{transform:scale(1.06)}
figcaption{position:absolute;left:0;right:0;bottom:0;padding:18px;transform:translateY(12px);opacity:0;transition:.32s;z-index:2}
figure:hover figcaption{transform:none;opacity:1}
figcaption b{display:block;font-size:16px}
figcaption small{color:#cfd3da;font-size:12.5px;letter-spacing:1px}
.meta{position:absolute;top:12px;left:12px;z-index:2;background:rgba(0,0,0,.5);backdrop-filter:blur(6px);
border:1px solid rgba(255,255,255,.16);border-radius:99px;padding:3px 11px;font-size:11.5px;letter-spacing:1px;opacity:0;transition:.3s}
figure:hover .meta{opacity:1}
/* 占位渐变图（可换成 <img src>） */
.fake{aspect-ratio:var(--r,4/3);background:var(--g);position:relative}
.fake::before{content:"";position:absolute;inset:0;
background-image:radial-gradient(rgba(255,255,255,.16) 1px,transparent 1px);background-size:14px 14px;opacity:.6}
.more{text-align:center;padding:8px 0 56px}
.more a{display:inline-block;padding:13px 34px;border:1px solid var(--line);border-radius:12px;color:var(--sub);font-size:14.5px;transition:.25s}
.more a:hover{border-color:var(--accent);color:var(--accent)}
footer{border-top:1px solid var(--line);padding:30px 0;text-align:center;color:#6f7681;font-size:13.5px}
footer .s{display:flex;gap:18px;justify-content:center;margin-bottom:12px}
footer .s a{color:var(--sub);font-size:14px}
footer .s a:hover{color:var(--accent)}
@media(max-width:520px){.grid{columns:1}}
</style>
</head>
<body>
<header class="wrap">
<div class="brand">PHOTO GALLERY</div>
<h1>光影集</h1>
<p>记录旅途中的一百零一个瞬间。所有作品均为原片直出，仅做基础曝光与白平衡校正。</p>
</header>
<div class="wrap">
<div class="filters">
<span class="on">全部</span><span>城市</span><span>自然</span><span>人像</span><span>静物</span><span>黑白</span>
</div>
<div class="grid">
<figure><div class="ph"><div class="fake" style="--g:linear-gradient(140deg,#2b5876,#4e4376);--r:3/4"></div></div>
<span class="meta">城市 · 35mm</span><figcaption><b>雨夜的立交桥</b><small>SHANGHAI · 2026.03</small></figcaption></figure>
<figure><div class="ph"><div class="fake" style="--g:linear-gradient(140deg,#f7971e,#ffd200);--r:4/3"></div></div>
<span class="meta">自然 · 24mm</span><figcaption><b>沙丘上的落日</b><small>DUNHUANG · 2025.10</small></figcaption></figure>
<figure><div class="ph"><div class="fake" style="--g:linear-gradient(140deg,#134e5e,#71b280);--r:1/1"></div></div>
<span class="meta">自然 · 50mm</span><figcaption><b>清晨的针叶林</b><small>CHANGBAI · 2025.08</small></figcaption></figure>
<figure><div class="ph"><div class="fake" style="--g:linear-gradient(140deg,#3a1c71,#d76d77,#ffaf7b);--r:3/4"></div></div>
<span class="meta">人像 · 85mm</span><figcaption><b>逆光下的侧脸</b><small>STUDIO · 2026.01</small></figcaption></figure>
<figure><div class="ph"><div class="fake" style="--g:linear-gradient(140deg,#232526,#414345);--r:4/3"></div></div>
<span class="meta">黑白 · 28mm</span><figcaption><b>老街的第七个转角</b><small>QUANZHOU · 2025.12</small></figcaption></figure>
<figure><div class="ph"><div class="fake" style="--g:linear-gradient(140deg,#00c6ff,#0072ff);--r:2/3"></div></div>
<span class="meta">自然 · 16mm</span><figcaption><b>浪与礁石</b><small>DALIAN · 2025.07</small></figcaption></figure>
<figure><div class="ph"><div class="fake" style="--g:linear-gradient(140deg,#eacda3,#d6ae7b);--r:1/1"></div></div>
<span class="meta">静物 · 100mm</span><figcaption><b>桌上的旧胶卷</b><small>HOME · 2026.02</small></figcaption></figure>
<figure><div class="ph"><div class="fake" style="--g:linear-gradient(140deg,#654ea3,#eaafc8);--r:3/4"></div></div>
<span class="meta">城市 · 35mm</span><figcaption><b>紫色的地铁口</b><small>SHENZHEN · 2026.04</small></figcaption></figure>
<figure><div class="ph"><div class="fake" style="--g:linear-gradient(140deg,#0f2027,#203a43,#2c5364);--r:4/3"></div></div>
<span class="meta">自然 · 70mm</span><figcaption><b>雾中的湖面</b><small>QIANDAO · 2025.11</small></figcaption></figure>
<figure><div class="ph"><div class="fake" style="--g:linear-gradient(140deg,#c31432,#240b36);--r:2/3"></div></div>
<span class="meta">人像 · 50mm</span><figcaption><b>红幕之后</b><small>BEIJING · 2026.05</small></figcaption></figure>
<figure><div class="ph"><div class="fake" style="--g:linear-gradient(140deg,#7f7fd5,#86a8e7,#91eae4);--r:1/1"></div></div>
<span class="meta">静物 · 60mm</span><figcaption><b>玻璃与光斑</b><small>STUDIO · 2026.06</small></figcaption></figure>
<figure><div class="ph"><div class="fake" style="--g:linear-gradient(140deg,#42275a,#734b6d);--r:4/3"></div></div>
<span class="meta">黑白 · 35mm</span><figcaption><b>楼梯间的独白</b><small>HANGZHOU · 2026.06</small></figcaption></figure>
</div>
<div class="more"><a href="#">加载更多作品</a></div>
</div>
<footer>
<div class="s"><a href="#">Instagram</a><a href="#">500px</a><a href="#">微博</a><a href="#">约拍咨询</a></div>
© 2026 光影集 · 未经许可请勿商用转载
</footer>
</body>
</html>
原创文章，作者：小蓝IT，如若转载，请注明出处：https://www.xiaolanzy.com/1746.html
微信扫一扫 
支付宝扫一扫 
