灵感目标：https://lsxy.500mm.cn
目标网站：https://m.bjdzm.cn
目标网站：https://hz.bjdzm.cn
先上最终效果链接：https://bjdzm.cn
在游戏行业竞争日益激烈的今天，一个视觉冲击力强、交互体验出色的官网是吸引玩家的关键。本文将为大家分享一套纯手工打造的星际科幻风格游戏官网模板，集成了3D特效、粒子动画和动态交互，采用现代前端技术栈实现极致视觉体验。
核心技术选型
HTML5 语义化架构
<nav class="navbar">...</nav>
<section class="hero" id="home">...</section>
<section class="features" id="features">...</section>
<canvas id="particle-container"></canvas>
采用语义化标签构建页面结构，结合Canvas API实现动态粒子效果，同时保证代码的可维护性和SEO友好性。
CSS3 高级视觉效果
- 3D变换
.feature-card:hover {
transform: translateY(-5px) rotateX(5deg);
}
通过CSS 3D变换实现卡片悬浮效果，增强页面层次感
- 渐变与阴影
background: linear-gradient(45deg, #00ffff, #008b8b);
text-shadow: 0 0 30px rgba(0, 255, 255, 1);
使用渐变背景和发光文字营造科幻氛围
- 动画关键帧
@keyframes zoom {
0% { transform: scale(1); }
50% { transform: scale(1.2); }
100% { transform: scale(1); }
}
实现背景图动态缩放效果，增加页面生动性
- 遮罩层效果
.feature-card::before {
content: '';
position: absolute;
top: 0;
left: -100%;
width: 100%;
height: 100%;
background: linear-gradient(90deg, transparent, rgba(0, 255, 255, 0.1), transparent);
transition: all 0.5s ease;
}
实现卡片悬停时的扫光特效，提升交互体验
JavaScript 动态交互
- 粒子特效系统
class Particle {
constructor() {
this.x = Math.random() * canvas.width;
this.y = Math.random() * canvas.height;
this.size = Math.random() * 3 + 1;
this.speedX = Math.random() * 0.5 - 0.25;
this.speedY = Math.random() * 0.5 - 0.25;
this.color = '#00ffff';
}
}
使用Canvas API实现200+粒子的动态漂浮效果，模拟星际尘埃
- 响应式适配
window.addEventListener('resize', () => {
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
});
确保粒子特效在窗口大小变化时保持全屏效果
代码模块详解
1. 导航栏模块
<nav class="navbar">
<div class="logo">星际觉醒</div>
<ul class="nav-links">
<li><a href="#home">首页</a></li>
</ul>
</nav>
- 功能：顶部导航栏，包含logo和菜单链接
- 技术点：半透明玻璃态效果+文字发光动画
- 交互：链接悬停时下划线动画
2. 英雄区模块
<section class="hero" id="home">
<div class="hero-content">
<h1>星际觉醒</h1>
<p>探索未知星系，觉醒超能力量</p>
<a href="#download" class="cta-button">立即下载</a>
</div>
</section>
- 功能：全屏宣传区，展示游戏核心卖点
- 技术点：动态缩放背景图+文字渐入动画
- 交互：CTA按钮悬停放大效果
3. 特色区模块
<section class="features" id="features">
<h2>游戏特色</h2>
<div class="features-grid">
<div class="feature-card">
<h3>开放宇宙</h3>
<p>探索100+个星系</p>
</div>
</div>
</section>
- 功能：展示游戏三大核心特色
- 技术点：Grid布局+3D悬浮效果
- 交互：卡片悬停扫光特效
4. 截图区模块
<section class="screenshots" id="screenshots">
<h2>游戏截图</h2>
<div class="screenshot-carousel">
<div class="screenshot-item">
<img src="screenshot1.jpg" alt="游戏截图">
</div>
</div>
</section>
- 功能：横向滚动截图展示
- 技术点：CSS overflow-x+scroll-snap
- 交互：图片悬停放大效果
5. 下载区模块
<section class="download" id="download">
<h2>立即下载</h2>
<div class="download-buttons">
<a href="#" class="download-button">Windows 版</a>
</div>
</section>
- 功能：多平台下载入口
- 技术点：渐变背景+按钮填充动画
- 交互：鼠标悬停时背景渐变效果
6. 粒子特效系统
const particles = [];
for (let i = 0; i < 200; i++) {
particles.push(new Particle());
}
function animate() {
ctx.fillStyle = 'rgba(0, 0, 0, 0.1)';
ctx.fillRect(0, 0, canvas.width, canvas.height);
particles.forEach(particle => {
particle.update();
particle.draw();
});
requestAnimationFrame(animate);
}
- 功能：全屏粒子动画背景
- 技术点：Canvas API+面向对象编程
- 效果：模拟星际尘埃漂浮效果
自定义指南
1. 修改游戏主题色
/* 主色调修改 */
color: #00ffff;
border-color: rgba(0, 255, 255, 0.3);
text-shadow: 0 0 20px rgba(0, 255, 255, 0.8);
将#00ffff替换为你的游戏品牌色
2. 更换背景图片
background: url('https://example.com/space-background.jpg') no-repeat center center/cover;
替换为你的游戏宣传图
3. 调整粒子数量
for (let i = 0; i < 200; i++) {
particles.push(new Particle());
}
修改200数值调整粒子密度
4. 更改卡片动画效果
.feature-card:hover {
transform: translateY(-5px) rotateX(5deg);
}
调整rotateX(5deg)数值改变旋转角度
性能优化技巧
- 图片懒加载
<img loading="lazy" src="screenshot.jpg" alt="游戏截图">
添加loading="lazy"属性实现图片懒加载
- CSS代码分割
将非关键CSS移至异步加载文件，减少首屏加载时间 - JavaScript节流
对resize事件添加节流处理，避免频繁重绘
浏览器兼容性
- ✅ Chrome 70+
- ✅ Firefox 65+
- ✅ Safari 13+
- ✅ Edge 79+
- ✅ 移动端主流浏览器
模板扩展方向
- 添加视频背景
<video autoplay loop muted>
<source src="game-trailer.mp4" type="video/mp4">
</video>
替换静态背景为游戏宣传片
- 实现滚动动画
const observer = new IntersectionObserver((entries) => {
entries.forEach(entry => {
if (entry.isIntersecting) {
entry.target.style.opacity = '1';
entry.target.style.transform = 'translateY(0)';
}
});
});
添加滚动触发的元素动画
- 集成表单功能
<form class="contact-form">
<input type="email" placeholder="输入邮箱">
<button type="submit">订阅</button>
</form>
添加邮件订阅功能
总结
这套游戏官网模板不仅实现了炫酷的视觉效果，还兼顾了代码的可维护性和扩展性。通过学习本模板，你将掌握：
- 现代CSS 3D变换技术
- Canvas粒子动画实现
- 响应式布局设计方法
- 动态交互效果优化
欢迎大家下载使用，并根据实际需求进行二次开发！
<html lang="zh-CN"><head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>星际觉醒 - 未来科幻游戏</title>
<style>
/* 全局样式重置 */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: 'Orbitron', sans-serif;
color: #00ffff;
background: #000;
overflow-x: hidden;
}
/* 星空背景动画 */
.stars {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: -1;
background: radial-gradient(circle, rgba(25,25,112,1) 0%, rgba(0,0,0,1) 100%);
}
/* 粒子特效容器 */
#particle-container {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 0;
}
/* 导航栏 */
.navbar {
display: flex;
justify-content: space-between;
align-items: center;
padding: 20px 100px;
background: rgba(0, 0, 0, 0.8);
backdrop-filter: blur(10px);
position: fixed;
width: 100%;
top: 0;
z-index: 1000;
border-bottom: 1px solid rgba(0, 255, 255, 0.3);
}
.logo {
font-size: 28px;
font-weight: bold;
text-transform: uppercase;
letter-spacing: 3px;
text-shadow: 0 0 20px rgba(0, 255, 255, 0.8);
animation: glow 2s ease-in-out infinite alternate;
}
@keyframes glow {
from { text-shadow: 0 0 20px rgba(0, 255, 255, 0.8); }
to { text-shadow: 0 0 30px rgba(0, 255, 255, 1); }
}
.nav-links {
display: flex;
list-style: none;
gap: 30px;
}
.nav-links a {
color: #00ffff;
text-decoration: none;
font-size: 16px;
transition: all 0.3s ease;
position: relative;
}
.nav-links a::after {
content: '';
position: absolute;
bottom: -5px;
left: 0;
width: 0;
height: 2px;
background: #00ffff;
transition: all 0.3s ease;
}
.nav-links a:hover::after {
width: 100%;
}
/* 英雄区 */
.hero {
height: 100vh;
display: flex;
align-items: center;
justify-content: center;
position: relative;
overflow: hidden;
}
.hero::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: url('https://example.com/space-background.jpg') no-repeat center center/cover;
animation: zoom 20s linear infinite;
}
@keyframes zoom {
0% { transform: scale(1); }
50% { transform: scale(1.2); }
100% { transform: scale(1); }
}
.hero-content {
text-align: center;
z-index: 1;
max-width: 800px;
}
.hero h1 {
font-size: 72px;
margin-bottom: 20px;
text-shadow: 0 0 30px rgba(0, 255, 255, 1);
animation: fadeInUp 1s ease;
}
.hero p {
font-size: 24px;
margin-bottom: 40px;
opacity: 0.9;
animation: fadeInUp 1s ease 0.2s both;
}
.cta-button {
display: inline-block;
padding: 18px 50px;
background: linear-gradient(45deg, #00ffff, #008b8b);
color: #000;
text-decoration: none;
border-radius: 50px;
font-size: 20px;
font-weight: bold;
transition: all 0.3s ease;
animation: fadeInUp 1s ease 0.4s both;
box-shadow: 0 0 20px rgba(0, 255, 255, 0.5);
}
.cta-button:hover {
transform: translateY(-2px);
box-shadow: 0 0 40px rgba(0, 255, 255, 0.8);
}
/* 特色区 */
.features {
padding: 100px;
background: rgba(0, 0, 0, 0.9);
}
.features h2 {
font-size: 48px;
text-align: center;
margin-bottom: 60px;
text-shadow: 0 0 20px rgba(0, 255, 255, 0.8);
}
.features-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 30px;
}
.feature-card {
background: rgba(0, 255, 255, 0.05);
padding: 30px;
border-radius: 10px;
border: 1px solid rgba(0, 255, 255, 0.3);
transition: all 0.3s ease;
position: relative;
overflow: hidden;
}
.feature-card::before {
content: '';
position: absolute;
top: 0;
left: -100%;
width: 100%;
height: 100%;
background: linear-gradient(90deg, transparent, rgba(0, 255, 255, 0.1), transparent);
transition: all 0.5s ease;
}
.feature-card:hover::before {
left: 100%;
}
.feature-card:hover {
transform: translateY(-5px) rotateX(5deg);
border-color: #00ffff;
box-shadow: 0 10px 30px rgba(0, 255, 255, 0.2);
}
.feature-card h3 {
font-size: 24px;
margin-bottom: 15px;
color: #00ffff;
}
.feature-card p {
color: #ccc;
line-height: 1.6;
}
/* 截图区 */
.screenshots {
padding: 100px;
background: rgba(0, 0, 0, 0.8);
}
.screenshots h2 {
font-size: 48px;
text-align: center;
margin-bottom: 60px;
text-shadow: 0 0 20px rgba(0, 255, 255, 0.8);
}
.screenshot-carousel {
display: flex;
overflow-x: auto;
gap: 20px;
padding-bottom: 20px;
scroll-snap-type: x mandatory;
}
.screenshot-item {
flex: 0 0 300px;
height: 200px;
border-radius: 10px;
overflow: hidden;
scroll-snap-align: start;
transition: all 0.3s ease;
}
.screenshot-item img {
width: 100%;
height: 100%;
object-fit: cover;
transition: all 0.3s ease;
}
.screenshot-item:hover img {
transform: scale(1.1);
}
/* 下载区 */
.download {
padding: 100px;
background: rgba(0, 0, 0, 0.9);
text-align: center;
}
.download h2 {
font-size: 48px;
margin-bottom: 40px;
text-shadow: 0 0 20px rgba(0, 255, 255, 0.8);
}
.download-buttons {
display: flex;
justify-content: center;
gap: 20px;
flex-wrap: wrap;
}
.download-button {
display: inline-block;
padding: 20px 40px;
background: rgba(0, 255, 255, 0.1);
color: #00ffff;
text-decoration: none;
border-radius: 10px;
border: 2px solid rgba(0, 255, 255, 0.5);
font-size: 18px;
font-weight: bold;
transition: all 0.3s ease;
position: relative;
overflow: hidden;
}
.download-button::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 0;
height: 100%;
background: rgba(0, 255, 255, 0.2);
transition: all 0.3s ease;
}
.download-button:hover::before {
width: 100%;
}
.download-button:hover {
border-color: #00ffff;
box-shadow: 0 0 20px rgba(0, 255, 255, 0.5);
}
/* 页脚 */
footer {
padding: 50px;
background: #000;
text-align: center;
color: #666;
}
footer p {
font-size: 14px;
}
/* 动画 */
@keyframes fadeInUp {
from {
opacity: 0;
transform: translateY(30px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
/* 响应式设计 */
@media (max-width: 768px) {
.navbar {
padding: 20px 50px;
}
.nav-links {
gap: 20px;
}
.hero h1 {
font-size: 48px;
}
.hero p {
font-size: 18px;
}
.features, .screenshots, .download {
padding: 50px 20px;
}
.download-buttons {
flex-direction: column;
align-items: center;
}
}
</style>
</head>
<body>
<!-- 星空背景 -->
<div class="stars"></div>
<!-- 粒子特效容器 -->
<div id="particle-container"><canvas width="412" height="823"></canvas></div>
<!-- 导航栏 -->
<nav class="navbar">
<div class="logo">星际觉醒</div>
<ul class="nav-links">
<li><a href="#home">首页</a></li>
<li><a href="#features">特色</a></li>
<li><a href="#screenshots">截图</a></li>
<li><a href="#download">下载</a></li>
<li><a href="#about">关于</a></li>
</ul>
</nav>
<!-- 英雄区 -->
<section class="hero" id="home">
<div class="hero-content">
<h1>星际觉醒</h1>
<p>探索未知星系，觉醒超能力量</p>
<a href="#download" class="cta-button">立即下载</a>
</div>
</section>
<!-- 游戏特色 -->
<section class="features" id="features">
<h2>游戏特色</h2>
<div class="features-grid">
<div class="feature-card">
<h3>开放宇宙</h3>
<p>探索100+个星系，发现神秘星球和外星文明</p>
</div>
<div class="feature-card">
<h3>超能力系统</h3>
<p>操控时间、空间和能量，打造独一无二的战斗风格</p>
</div>
<div class="feature-card">
<h3>太空战舰</h3>
<p>定制专属战舰，组建舰队征服宇宙</p>
</div>
</div>
</section>
<!-- 游戏截图 -->
<section class="screenshots" id="screenshots">
<h2>游戏截图</h2>
<div class="screenshot-carousel">
<div class="screenshot-item">
<img src="https://example.com/screenshot1.jpg" alt="游戏截图1">
</div>
<div class="screenshot-item">
<img src="https://example.com/screenshot2.jpg" alt="游戏截图2">
</div>
<div class="screenshot-item">
<img src="https://example.com/screenshot3.jpg" alt="游戏截图3">
</div>
<div class="screenshot-item">
<img src="https://example.com/screenshot4.jpg" alt="游戏截图4">
</div>
</div>
</section>
<!-- 下载区 -->
<section class="download" id="download">
<h2>立即下载</h2>
<div class="download-buttons">
<a href="#" class="download-button">Windows 版</a>
<a href="#" class="download-button">Mac 版</a>
<a href="#" class="download-button">iOS 版</a>
<a href="#" class="download-button">Android 版</a>
</div>
</section>
<!-- 页脚 -->
<footer>
<p>© 2025 星际觉醒. All rights reserved.</p>
</footer>
<!-- 粒子特效JavaScript -->
<script>
const canvas = document.createElement('canvas');
const ctx = canvas.getContext('2d');
const particleContainer = document.getElementById('particle-container');
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
particleContainer.appendChild(canvas);
class Particle {
constructor() {
this.x = Math.random() * canvas.width;
this.y = Math.random() * canvas.height;
this.size = Math.random() * 3 + 1;
this.speedX = Math.random() * 0.5 - 0.25;
this.speedY = Math.random() * 0.5 - 0.25;
this.color = '#00ffff';
}
update() {
this.x += this.speedX;
this.y += this.speedY;
if (this.x < 0 || this.x > canvas.width) this.speedX *= -1;
if (this.y < 0 || this.y > canvas.height) this.speedY *= -1;
}
draw() {
ctx.fillStyle = this.color;
ctx.beginPath();
ctx.arc(this.x, this.y, this.size, 0, Math.PI * 2);
ctx.fill();
}
}
const particles = [];
for (let i = 0; i < 200; i++) {
particles.push(new Particle());
}
function animate() {
ctx.fillStyle = 'rgba(0, 0, 0, 0.1)';
ctx.fillRect(0, 0, canvas.width, canvas.height);
particles.forEach(particle => {
particle.update();
particle.draw();
});
requestAnimationFrame(animate);
}
animate();
window.addEventListener('resize', () => {
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
});
</script>
</body></html>
扫一扫
5万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
