1. 小蓝资源网首页
  2. 网站源码

星河之夜科技峰会邀请函 HTML 单页源码

小蓝IT • • 网站源码 • 阅读 10

深蓝星空背景的活动邀请函单页，含议程时间线、嘉宾卡片与报名表单。

本源码是一款高端活动/峰会邀请函单页模板，以深空蓝紫渐变与金色点缀为主视觉，适合科技发布会、年度盛典、论坛沙龙等需要仪式感的线上邀约场景。页面结构清晰：首屏直击主题信息，中部为当晚议程时间线与嘉宾阵容，底部为实名回执表单。

设计亮点在于纯 CSS 绘制的星空背景与随机闪烁星点动画，营造沉浸式「星河之夜」氛围；议程部分使用垂直时间线，嘉宾卡片悬停时有玻璃拟态上浮动效。整页响应式适配，手机端同样能呈现完整的活动信息。

适合会务组织者、品牌市场团队、创业公司在活动预热期作为 H5 邀请函使用。只需替换时间地点、嘉宾头像与活动文案，即可快速生成一份可直接转发的单页邀请函。

星河之夜科技峰会邀请函 HTML 单页源码

使用教程

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.0">
<title>星河之夜 · 2026 创新科技峰会邀请函</title>
<style>
:root{
  --ink:#0a0e27;
  --ink2:#141a3c;
  --gold:#e8c37a;
  --gold-2:#f6e3b6;
  --violet:#6d5bd0;
  --text:#e9e9f5;
  --muted:#9aa0c4;
}
*{margin:0;padding:0;box-sizing:border-box}
body{
  font-family:"PingFang SC","Microsoft YaHei","Noto Sans SC",sans-serif;
  background:var(--ink);color:var(--text);line-height:1.75;
  -webkit-font-smoothing:antialiased;overflow-x:hidden;
}
a{color:inherit;text-decoration:none}

/* ===== 星空背景 ===== */
.sky{position:fixed;inset:0;z-index:0;overflow:hidden;pointer-events:none}
.sky::before{
  content:"";position:absolute;inset:-20%;
  background:
    radial-gradient(circle at 18% 22%, rgba(109,91,208,.38), transparent 46%),
    radial-gradient(circle at 82% 12%, rgba(232,195,122,.20), transparent 42%),
    radial-gradient(circle at 60% 88%, rgba(58,120,214,.26), transparent 50%);
  filter:blur(10px);
}
.star{position:absolute;background:#fff;border-radius:50%;opacity:.7;animation:tw 3.6s ease-in-out infinite}
@keyframes tw{0%,100%{opacity:.15;transform:scale(.7)}50%{opacity:.95;transform:scale(1)}}

.wrap{position:relative;z-index:1;max-width:1080px;margin:0 auto;padding:0 24px}

/* ===== 顶部 ===== */
.topbar{display:flex;align-items:center;justify-content:space-between;padding:26px 0}
.brand{display:flex;align-items:center;gap:12px;font-weight:800;letter-spacing:.14em;font-size:14px}
.brand i{
  width:32px;height:32px;border-radius:9px;display:grid;place-items:center;font-style:normal;
  background:linear-gradient(135deg,var(--gold),#b98d3f);color:#20160a;font-weight:900;
}
.topbar nav{display:flex;gap:26px;font-size:13.5px;color:var(--muted)}
.topbar nav a:hover{color:var(--gold)}

/* ===== 主视觉 ===== */
.hero{text-align:center;padding:56px 0 70px}
.tag{
  display:inline-block;padding:7px 20px;border-radius:99px;font-size:12.5px;letter-spacing:.22em;
  border:1px solid rgba(232,195,122,.45);color:var(--gold);background:rgba(232,195,122,.07);
  margin-bottom:30px;
}
.hero h1{
  font-size:clamp(38px,7.2vw,78px);line-height:1.14;font-weight:900;letter-spacing:.02em;
  background:linear-gradient(120deg,#fff 8%,var(--gold-2) 44%,var(--gold) 62%,#fff 92%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
  margin-bottom:18px;
}
.hero .sub{font-size:clamp(15px,2.2vw,19px);color:var(--muted);max-width:640px;margin:0 auto 34px}
.rule{width:88px;height:2px;margin:0 auto 34px;background:linear-gradient(90deg,transparent,var(--gold),transparent)}

/* ===== 倒计时/信息条 ===== */
.meta{
  display:grid;grid-template-columns:repeat(3,1fr);gap:1px;
  background:rgba(255,255,255,.09);border:1px solid rgba(255,255,255,.09);
  border-radius:16px;overflow:hidden;max-width:720px;margin:0 auto;
  backdrop-filter:blur(8px);
}
.meta div{background:rgba(20,26,60,.72);padding:22px 14px;text-align:center}
.meta span{display:block;font-size:11.5px;letter-spacing:.2em;color:var(--muted);margin-bottom:7px}
.meta strong{font-size:16px;font-weight:700;color:var(--gold-2)}

/* ===== 通用区块 ===== */
section{padding:76px 0}
.sec-head{text-align:center;margin-bottom:48px}
.sec-head em{font-style:normal;font-size:12px;letter-spacing:.3em;color:var(--gold);display:block;margin-bottom:12px}
.sec-head h2{font-size:clamp(25px,4vw,36px);font-weight:800}

/* ===== 议程 ===== */
.agenda{max-width:820px;margin:0 auto;position:relative}
.agenda::before{content:"";position:absolute;left:96px;top:8px;bottom:8px;width:1px;background:linear-gradient(180deg,transparent,rgba(232,195,122,.5),transparent)}
.item{display:grid;grid-template-columns:96px 1fr;gap:30px;padding:20px 0;position:relative}
.item .t{text-align:right;font-weight:800;color:var(--gold);font-size:15px;padding-top:2px}
.item .c{padding-left:8px}
.item .c::before{
  content:"";position:absolute;left:92px;top:26px;width:9px;height:9px;border-radius:50%;
  background:var(--gold);box-shadow:0 0 0 4px rgba(232,195,122,.16);
}
.item h4{font-size:17px;font-weight:700;margin-bottom:5px}
.item p{font-size:14px;color:var(--muted)}

/* ===== 嘉宾 ===== */
.guests{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:22px}
.g{
  background:linear-gradient(160deg,rgba(255,255,255,.075),rgba(255,255,255,.02));
  border:1px solid rgba(255,255,255,.1);border-radius:18px;padding:30px 22px;text-align:center;
  transition:.35s;
}
.g:hover{transform:translateY(-7px);border-color:rgba(232,195,122,.5);box-shadow:0 20px 46px rgba(0,0,0,.45)}
.av{
  width:78px;height:78px;border-radius:50%;margin:0 auto 16px;display:grid;place-items:center;
  font-size:27px;font-weight:900;color:#1a1206;
}
.g:nth-child(1) .av{background:linear-gradient(135deg,#f3d68f,#c39441)}
.g:nth-child(2) .av{background:linear-gradient(135deg,#a99bf0,#5d4bc4)}
.g:nth-child(3) .av{background:linear-gradient(135deg,#87c7f2,#3a72c8)}
.g:nth-child(4) .av{background:linear-gradient(135deg,#f2a3a3,#c4525f)}
.g h4{font-size:17px;margin-bottom:4px}
.g .role{font-size:12.5px;color:var(--gold);letter-spacing:.08em;margin-bottom:10px}
.g p{font-size:13px;color:var(--muted);line-height:1.7}

/* ===== 报名 ===== */
.rsvp{
  background:linear-gradient(150deg,rgba(109,91,208,.24),rgba(232,195,122,.1));
  border:1px solid rgba(232,195,122,.28);border-radius:24px;padding:46px 34px;text-align:center;
}
.rsvp h3{font-size:clamp(22px,3.4vw,30px);margin-bottom:12px}
.rsvp p{color:var(--muted);margin-bottom:28px;font-size:14.5px}
.form{display:flex;gap:12px;max-width:520px;margin:0 auto;flex-wrap:wrap}
.form input{
  flex:1;min-width:200px;padding:14px 18px;border-radius:11px;font-size:14.5px;
  background:rgba(10,14,39,.7);border:1px solid rgba(255,255,255,.16);color:var(--text);outline:none;
}
.form input::placeholder{color:#6f76a0}
.form input:focus{border-color:var(--gold)}
.btn{
  padding:14px 34px;border-radius:11px;border:none;cursor:pointer;font-size:14.5px;font-weight:800;
  background:linear-gradient(135deg,var(--gold-2),var(--gold));color:#231803;transition:.25s;
}
.btn:hover{transform:translateY(-2px);box-shadow:0 12px 28px rgba(232,195,122,.34)}
.note{margin-top:18px;font-size:12.5px;color:#7d84ad}

/* ===== 页脚 ===== */
footer{border-top:1px solid rgba(255,255,255,.08);padding:34px 0;text-align:center;color:#767ca6;font-size:13px}
footer .fl{display:flex;gap:22px;justify-content:center;margin-bottom:14px}
footer .fl a:hover{color:var(--gold)}

@media(max-width:640px){
  .topbar nav{display:none}
  .meta{grid-template-columns:1fr}
  .agenda::before{left:62px}
  .item{grid-template-columns:62px 1fr;gap:18px}
  .item .c::before{left:58px}
  section{padding:56px 0}
}
</style>
</head>
<body>

<div class="sky" id="sky"></div>

<div class="wrap">
  <header class="topbar">
    <div class="brand"><i>星</i>STARRIVER SUMMIT</div>
    <nav>
      <a href="#agenda">日程</a>
      <a href="#guest">嘉宾</a>
      <a href="#rsvp">报名</a>
      <a href="#contact">联系</a>
    </nav>
  </header>

  <div class="hero">
    <div class="tag">2 0 2 6 · 年 度 邀 请 函</div>
    <h1>星河之夜<br>创新科技峰会</h1>
    <div class="rule"></div>
    <p class="sub">当技术遇见想象，当代码点亮星河。诚邀您与全球顶尖创造者共赴这场关于未来的对话。</p>
    <div class="meta">
      <div><span>D A T E</span><strong>2026 年 9 月 18 日</strong></div>
      <div><span>T I M E</span><strong>18:30 — 22:00</strong></div>
      <div><span>V E N U E</span><strong>云港国际会展中心 A 厅</strong></div>
    </div>
  </div>
</div>

<section id="agenda">
  <div class="wrap">
    <div class="sec-head"><em>A G E N D A</em><h2>当晚议程</h2></div>
    <div class="agenda">
      <div class="item"><div class="t">18:30</div><div class="c"><h4>星门签到 · 欢迎酒会</h4><p>凭邀请函二维码入场，领取纪念徽章与议程手册，自由社交。</p></div></div>
      <div class="item"><div class="t">19:00</div><div class="c"><h4>开幕主题演讲</h4><p>《下一个十年：从生成式智能到通用创造力》主论坛开场。</p></div></div>
      <div class="item"><div class="t">19:45</div><div class="c"><h4>圆桌对话</h4><p>四位行业领袖围绕「技术伦理与商业边界」展开交锋。</p></div></div>
      <div class="item"><div class="t">20:30</div><div class="c"><h4>创新项目路演</h4><p>六支入围团队各用 6 分钟展示他们的年度作品。</p></div></div>
      <div class="item"><div class="t">21:20</div><div class="c"><h4>星河颁奖礼</h4><p>揭晓年度创新奖、最佳设计奖与人气之选。</p></div></div>
      <div class="item"><div class="t">21:50</div><div class="c"><h4>自由交流 · 闭幕</h4><p>轻音乐与香槟时间，合影留念，赠送伴手礼。</p></div></div>
    </div>
  </div>
</section>

<section id="guest">
  <div class="wrap">
    <div class="sec-head"><em>S P E A K E R S</em><h2>特邀嘉宾</h2></div>
    <div class="guests">
      <div class="g"><div class="av">舒</div><h4>舒 亦 白</h4><div class="role">星河实验室 · 首席科学家</div><p>专注多模态大模型十余年，主导三代基础模型架构演进。</p></div>
      <div class="g"><div class="av">柯</div><h4>柯 沐 川</h4><div class="role">未名资本 · 管理合伙人</div><p>早期投资人，累计参与 40+ 科技公司从 0 到 1 的成长。</p></div>
      <div class="g"><div class="av">简</div><h4>简 若 芸</h4><div class="role">形界设计 · 创意总监</div><p>三度红点至尊奖得主，相信设计是技术最温柔的翻译。</p></div>
      <div class="g"><div class="av">邵</div><h4>邵 之 恒</h4><div class="role">开源社区 · 核心维护者</div><p>十五万星标项目发起人，长期布道开发者生态建设。</p></div>
    </div>
  </div>
</section>

<section id="rsvp">
  <div class="wrap">
    <div class="rsvp">
      <h3>席位有限 · 敬请回执</h3>
      <p>本次峰会采取实名邀请制，名额 300 位。提交信息后，电子入场券将发送至您的邮箱。</p>
      <form class="form" onsubmit="event.preventDefault();this.querySelector('.btn').textContent='已提交 ✓';">
        <input type="text" placeholder="您的姓名" required>
        <input type="email" placeholder="邮箱地址" required>
        <button class="btn" type="submit">确认出席</button>
      </form>
      <div class="note">提交即表示同意主办方将活动相关信息发送至该邮箱</div>
    </div>
  </div>
</section>

<footer id="contact">
  <div class="wrap">
    <div class="fl"><a href="#">主办方介绍</a><a href="#">往届回顾</a><a href="#">媒体合作</a><a href="#">交通指引</a></div>
    <div>星河之夜组委会 · 咨询电话 400-820-9981 · summit@starriver.dev</div>
    <div style="margin-top:8px;opacity:.6">© 2026 StarRiver Summit. 本页面为演示模板。</div>
  </div>
</footer>

<script>
// 生成随机星点
(function(){
  var sky=document.getElementById('sky'),n=110,f=document.createDocumentFragment();
  for(var i=0;i<n;i++){
    var s=document.createElement('div');s.className='star';
    var size=Math.random()*2+0.6;
    s.style.width=size+'px';s.style.height=size+'px';
    s.style.left=Math.random()*100+'%';s.style.top=Math.random()*100+'%';
    s.style.animationDelay=(Math.random()*3.6)+'s';
    f.appendChild(s);
  }
  sky.appendChild(f);
})();
</script>
</body>
</html>

原创文章，作者：小蓝IT，如若转载，请注明出处：https://www.xiaolanzy.com/1764.html

赞 (0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
0 0

关于作者

小蓝IT的头像

小蓝IT

394 文章
12 评论
13 粉丝
13年建站经验，为用户提供企业、个人、博客网站搭建服务
慢读志博客文章页 HTML 单页源码（暖橙阅读风）
上一篇 1天前
云图帮助中心 FAQ 页面 HTML 单页源码
下一篇 9小时前

相关推荐

发表回复

登录后才能评论
分享本页
返回顶部
icon 首页
icon 网站源码
icon IT资讯
icon 网站客服