灵感目标：https://lsxy.500mm.cn
目标网站：https://m.bjdzm.cn
目标网站：https://hz.bjdzm.cn
先上最终效果链接：https://bjdzm.cn
蒸汽朋克风格以其独特的复古机械美学和工业时代气息，在游戏领域拥有广泛的受众基础。本文将分享一套纯手工打造的蒸汽朋克风格游戏官网模板，集成了动态齿轮背景、黄铜金属质感和交互式机械元素，采用现代前端技术栈实现极致视觉体验。
核心技术选型
HTML5 语义化架构
<nav class="navbar">...</nav>
<section class="hero" id="home">...</section>
<section class="features" id="features">...</section>
<div class="gears"></div>
采用语义化标签构建页面结构，结合多层嵌套实现视觉深度，同时保证代码的可维护性和SEO友好性。
CSS3 高级视觉效果
- 金属质感文字
.logo {
text-shadow: 0 0 20px rgba(212, 175, 55, 0.8);
animation: gear-pulse 2s ease-in-out infinite alternate;
}
通过CSS文字阴影和关键帧动画实现黄铜金属文字闪烁效果
- 齿轮旋转动画
@keyframes rotate {
from { transform: rotate(0deg); }
to { transform: rotate(360deg); }
}
实现背景齿轮的缓慢旋转效果，增强蒸汽朋克氛围
- 3D变换
.machine-card:hover {
transform: translateY(-10px) scale(1.05);
}
通过CSS 3D变换实现卡片悬浮效果，增强页面层次感
- 纹理背景
.texture-background {
background-image: url('https://example.com/metal-texture.jpg');
background-size: 200px 200px;
opacity: 0.1;
}
使用金属纹理背景增强复古工业质感
JavaScript 动态交互
- 动态齿轮生成
function createGears() {
const gearsDiv = document.querySelector('.gears');
for (let i = 0; i < 20; i++) {
const gear = document.createElement('div');
gear.style.border = `${Math.random() * 10 + 5}px solid ${colors[Math.floor(Math.random() * colors.length)]}`;
gear.style.animation = `rotate ${Math.random() * 10 + 10}s linear infinite`;
gearsDiv.appendChild(gear);
}
}
动态生成20个大小、颜色、旋转速度各异的背景齿轮
- 鼠标跟随齿轮效果
document.addEventListener('mousemove', (e) => {
const mouseX = e.clientX;
const mouseY = e.clientY;
const gear = document.createElement('div');
gear.style.border = '3px solid #d4af37';
gear.style.left = `${mouseX}px`;
gear.style.top = `${mouseY}px`;
document.body.appendChild(gear);
});
创建鼠标跟随的齿轮效果，增强页面交互体验
代码模块详解
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>设计并制造蒸汽动力机械</p>
</div>
</div>
</section>
- 功能：展示游戏三大核心特色
- 技术点：Grid布局+卡片悬浮效果
- 交互：卡片悬停扫光特效
4. 机械展示模块
<section class="machinery" id="machinery">
<h2>机械工坊</h2>
<div class="machine-grid">
<div class="machine-card">
<div class="machine-image"></div>
<div class="machine-info">
<div class="machine-name">蒸汽火车</div>
</div>
</div>
</div>
</section>
- 功能：展示游戏可选机械单位
- 技术点：卡片网格布局+3D变换
- 交互：卡片悬停缩放效果
5. 地图交互模块
<section class="map" id="map">
<h2>游戏地图</h2>
<div class="map-container">
<div class="map-image"></div>
</div>
</section>
- 功能：展示游戏世界地图
- 技术点：地图容器半透明边框
- 交互：鼠标悬停地图标记点（可扩展）
6. 下载区模块
<section class="download" id="download">
<h2>立即下载</h2>
<div class="download-buttons">
<a href="#" class="download-button">Windows 版</a>
</div>
</section>
- 功能：多平台下载入口
- 技术点：渐变背景+按钮填充动画
- 交互：按钮悬停背景变化
7. 社区互动模块
<section class="community" id="community">
<h2>加入社区</h2>
<div class="social-links">
<a href="#" class="social-link">Discord</a>
</div>
</section>
- 功能：社交媒体链接
- 技术点：圆形按钮布局
- 交互：按钮悬停放大效果
自定义指南
1. 修改金属主题色
/* 主色调修改 */
color: #d4af37;
border-color: rgba(212, 175, 55, 0.3);
text-shadow: 0 0 20px rgba(212, 175, 55, 0.8);
将#d4af37替换为你的游戏品牌色
2. 调整齿轮数量
for (let i = 0; i < 20; i++) {
createGears();
}
修改20数值调整齿轮密度
3. 改变卡片动画效果
.machine-card:hover {
transform: translateY(-10px) scale(1.05);
}
调整scale(1.05)数值改变缩放比例
4. 自定义鼠标跟随效果
gear.style.width = '40px';
gear.style.height = '40px';
gear.style.border = '3px solid #d4af37';
修改尺寸和颜色调整齿轮效果
性能优化技巧
- 图片懒加载
<img loading="lazy" src="machine.jpg" alt="机械图片">
添加loading="lazy"属性实现图片懒加载
- CSS代码分割
将非关键CSS移至异步加载文件，减少首屏加载时间 - JavaScript节流
对mousemove事件添加节流处理，避免频繁重绘
浏览器兼容性
- ✅ Chrome 70+
- ✅ Firefox 65+
- ✅ Safari 13+
- ✅ Edge 79+
- ✅ 移动端主流浏览器
模板扩展方向
- 添加动态蒸汽效果
// 使用Canvas绘制蒸汽粒子
function createSteam() {
const canvas = document.createElement('canvas');
// ...绘制蒸汽粒子效果
}
替换静态背景为动态蒸汽效果
- 实现机械组装动画
// 机械组装过程动画
function animateAssembly() {
const machine = document.querySelector('.machine-image');
// ...实现机械部件组装动画
}
添加机械单位组装过程的动画效果
- 集成机械蓝图编辑器
<!-- 机械蓝图编辑器 -->
<iframe src="blueprint-editor.html" frameborder="0"></iframe>
嵌入机械蓝图编辑器，让玩家提前体验游戏玩法
总结
这套蒸汽朋克风格游戏官网模板不仅实现了炫酷的视觉效果，还兼顾了代码的可维护性和扩展性。通过学习本模板，你将掌握：
- 动态齿轮背景实现
- 金属质感UI设计
- 3D变换与交互设计
- 蒸汽朋克风格色彩搭配
欢迎大家下载使用，并根据实际需求进行二次开发！
<!DOCTYPE html>
<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: 'Playfair Display', serif;
color: #d4af37;
background: #2c1e1e;
overflow-x: hidden;
}
/* 齿轮背景 */
.gears {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: -1;
}
/* 机械纹理背景 */
.texture-background {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-image: url('https://example.com/metal-texture.jpg');
background-size: 200px 200px;
opacity: 0.1;
z-index: -1;
}
/* 导航栏 */
.navbar {
display: flex;
justify-content: space-between;
align-items: center;
padding: 20px 100px;
background: rgba(44, 30, 30, 0.9);
backdrop-filter: blur(5px);
position: fixed;
width: 100%;
top: 0;
z-index: 1000;
border-bottom: 1px solid rgba(212, 175, 55, 0.3);
}
.logo {
font-size: 32px;
font-weight: bold;
text-transform: uppercase;
letter-spacing: 5px;
text-shadow: 0 0 20px rgba(212, 175, 55, 0.8);
animation: gear-pulse 2s ease-in-out infinite alternate;
}
@keyframes gear-pulse {
from { text-shadow: 0 0 20px rgba(212, 175, 55, 0.8); }
to { text-shadow: 0 0 30px rgba(212, 175, 55, 1), 0 0 40px rgba(212, 175, 55, 0.8); }
}
.nav-links {
display: flex;
list-style: none;
gap: 30px;
}
.nav-links a {
color: #d4af37;
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: #d4af37;
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/steampunk-city.jpg') no-repeat center center/cover;
opacity: 0.4;
}
.hero-content {
text-align: center;
z-index: 1;
max-width: 800px;
}
.hero h1 {
font-size: 72px;
margin-bottom: 20px;
text-shadow: 0 0 20px rgba(212, 175, 55, 0.8);
animation: fadeInUp 1s ease;
}
.hero p {
font-size: 20px;
margin-bottom: 40px;
opacity: 0.9;
animation: fadeInUp 1s ease 0.2s both;
line-height: 1.8;
}
.cta-button {
display: inline-block;
padding: 18px 50px;
background: linear-gradient(45deg, #d4af37, #b8860b);
color: #2c1e1e;
text-decoration: none;
border-radius: 50px;
font-size: 18px;
font-weight: bold;
transition: all 0.3s ease;
animation: fadeInUp 1s ease 0.4s both;
box-shadow: 0 0 20px rgba(212, 175, 55, 0.5);
}
.cta-button:hover {
transform: translateY(-2px);
box-shadow: 0 0 40px rgba(212, 175, 55, 0.8);
}
/* 游戏特色 */
.features {
padding: 100px;
background: rgba(44, 30, 30, 0.9);
}
.features h2 {
font-size: 48px;
text-align: center;
margin-bottom: 60px;
text-shadow: 0 0 20px rgba(212, 175, 55, 0.8);
}
.features-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 30px;
}
.feature-card {
background: rgba(212, 175, 55, 0.05);
padding: 30px;
border-radius: 10px;
border: 1px solid rgba(212, 175, 55, 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(212, 175, 55, 0.1), transparent);
transition: all 0.5s ease;
}
.feature-card:hover::before {
left: 100%;
}
.feature-card:hover {
transform: translateY(-5px);
border-color: #d4af37;
box-shadow: 0 10px 30px rgba(212, 175, 55, 0.2);
}
.feature-card h3 {
font-size: 24px;
margin-bottom: 15px;
color: #d4af37;
}
.feature-card p {
color: #ccc;
line-height: 1.6;
}
/* 机械展示 */
.machinery {
padding: 100px;
background: rgba(44, 30, 30, 0.8);
}
.machinery h2 {
font-size: 48px;
text-align: center;
margin-bottom: 60px;
text-shadow: 0 0 20px rgba(212, 175, 55, 0.8);
}
.machine-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: 30px;
}
.machine-card {
border: 1px solid rgba(212, 175, 55, 0.3);
border-radius: 10px;
overflow: hidden;
transition: all 0.3s ease;
}
.machine-card:hover {
transform: translateY(-10px) scale(1.05);
border-color: #d4af37;
box-shadow: 0 15px 40px rgba(212, 175, 55, 0.3);
}
.machine-image {
width: 100%;
height: 300px;
background: url('https://example.com/machine.jpg') no-repeat center center/cover;
position: relative;
}
.machine-info {
padding: 20px;
background: rgba(44, 30, 30, 0.8);
}
.machine-name {
font-size: 20px;
font-weight: bold;
margin-bottom: 10px;
color: #d4af37;
}
.machine-type {
font-size: 16px;
color: #ccc;
}
/* 地图交互 */
.map {
padding: 100px;
background: rgba(44, 30, 30, 0.9);
text-align: center;
}
.map h2 {
font-size: 48px;
margin-bottom: 40px;
text-shadow: 0 0 20px rgba(212, 175, 55, 0.8);
}
.map-container {
max-width: 1000px;
margin: 0 auto;
position: relative;
border: 2px solid rgba(212, 175, 55, 0.3);
border-radius: 10px;
overflow: hidden;
}
.map-image {
width: 100%;
height: 500px;
background: url('https://example.com/steam-map.jpg') no-repeat center center/cover;
}
/* 下载区 */
.download {
padding: 100px;
background: rgba(44, 30, 30, 0.9);
text-align: center;
}
.download h2 {
font-size: 48px;
margin-bottom: 40px;
text-shadow: 0 0 20px rgba(212, 175, 55, 0.8);
}
.download-buttons {
display: flex;
justify-content: center;
gap: 20px;
flex-wrap: wrap;
}
.download-button {
display: inline-block;
padding: 20px 40px;
background: rgba(212, 175, 55, 0.1);
color: #d4af37;
text-decoration: none;
border-radius: 10px;
border: 2px solid rgba(212, 175, 55, 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(212, 175, 55, 0.2);
transition: all 0.3s ease;
}
.download-button:hover::before {
width: 100%;
}
.download-button:hover {
border-color: #d4af37;
box-shadow: 0 0 20px rgba(212, 175, 55, 0.5);
}
/* 社区互动 */
.community {
padding: 100px;
background: rgba(44, 30, 30, 0.8);
text-align: center;
}
.community h2 {
font-size: 48px;
margin-bottom: 40px;
text-shadow: 0 0 20px rgba(212, 175, 55, 0.8);
}
.social-links {
display: flex;
justify-content: center;
gap: 30px;
flex-wrap: wrap;
}
.social-link {
display: inline-block;
width: 60px;
height: 60px;
background: rgba(212, 175, 55, 0.1);
border: 2px solid rgba(212, 175, 55, 0.5);
border-radius: 50%;
transition: all 0.3s ease;
display: flex;
align-items: center;
justify-content: center;
color: #d4af37;
text-decoration: none;
font-size: 24px;
}
.social-link:hover {
background: rgba(212, 175, 55, 0.3);
border-color: #d4af37;
transform: scale(1.1);
box-shadow: 0 0 20px rgba(212, 175, 55, 0.5);
}
/* 页脚 */
footer {
padding: 50px;
background: #1a1010;
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, .machinery, .map, .download, .community {
padding: 50px 20px;
}
.download-buttons {
flex-direction: column;
align-items: center;
}
}
</style>
</head>
<body>
<!-- 齿轮背景 -->
<div class="gears"></div>
<!-- 机械纹理背景 -->
<div class="texture-background"></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="#machinery">机械</a></li>
<li><a href="#map">地图</a></li>
<li><a href="#download">下载</a></li>
<li><a href="#community">社区</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>设计并制造蒸汽动力机械，构建工业王朝</p>
</div>
<div class="feature-card">
<h3>复古世界探险</h3>
<p>探索蒸汽朋克风格的大陆，发现遗失的技术</p>
</div>
<div class="feature-card">
<h3>策略战斗系统</h3>
<p>指挥机械军队，进行大规模工业战争</p>
</div>
</div>
</section>
<!-- 机械展示 -->
<section class="machinery" id="machinery">
<h2>机械工坊</h2>
<div class="machine-grid">
<div class="machine-card">
<div class="machine-image"></div>
<div class="machine-info">
<div class="machine-name">蒸汽火车</div>
<div class="machine-type">交通工具</div>
</div>
</div>
<div class="machine-card">
<div class="machine-image"></div>
<div class="machine-info">
<div class="machine-name">钢铁机甲</div>
<div class="machine-type">战斗单位</div>
</div>
</div>
<div class="machine-card">
<div class="machine-image"></div>
<div class="machine-info">
<div class="machine-name">飞艇舰队</div>
<div class="machine-type">空中力量</div>
</div>
</div>
</div>
</section>
<!-- 地图交互 -->
<section class="map" id="map">
<h2>游戏地图</h2>
<div class="map-container">
<div class="map-image"></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">Linux 版</a>
<a href="#" class="download-button">移动端</a>
</div>
</section>
<!-- 社区互动 -->
<section class="community" id="community">
<h2>加入社区</h2>
<div class="social-links">
<a href="#" class="social-link">Discord</a>
<a href="#" class="social-link">Twitter</a>
<a href="#" class="social-link">YouTube</a>
<a href="#" class="social-link">Steam</a>
</div>
</section>
<!-- 页脚 -->
<footer>
<p>© 2025 蒸汽时代：齿轮革命. All rights reserved.</p>
</footer>
<!-- 齿轮动画特效 -->
<script>
// 创建齿轮背景
function createGears() {
const gearsDiv = document.querySelector('.gears');
const colors = ['#d4af37', '#b8860b', '#cd7f32', '#c0c0c0'];
for (let i = 0; i < 20; i++) {
const gear = document.createElement('div');
gear.style.position = 'fixed';
gear.style.width = `${Math.random() * 200 + 50}px`;
gear.style.height = `${Math.random() * 200 + 50}px`;
gear.style.borderRadius = '50%';
gear.style.border = `${Math.random() * 10 + 5}px solid ${colors[Math.floor(Math.random() * colors.length)]}`;
gear.style.opacity = `${Math.random() * 0.5 + 0.1}`;
gear.style.pointerEvents = 'none';
gear.style.zIndex = '-1';
gear.style.left = `${Math.random() * 100}vw`;
gear.style.top = `${Math.random() * 100}vh`;
gear.style.animation = `rotate ${Math.random() * 10 + 10}s linear infinite`;
gear.style.transformOrigin = 'center center';
gearsDiv.appendChild(gear);
}
}
// 旋转动画
document.head.insertAdjacentHTML('beforeend', `
<style>
@keyframes rotate {
from { transform: rotate(0deg); }
to { transform: rotate(360deg); }
}
</style>
`);
createGears();
// 鼠标跟随齿轮效果
document.addEventListener('mousemove', (e) => {
const mouseX = e.clientX;
const mouseY = e.clientY;
const gear = document.createElement('div');
gear.style.position = 'fixed';
gear.style.width = '40px';
gear.style.height = '40px';
gear.style.borderRadius = '50%';
gear.style.border = '3px solid #d4af37';
gear.style.opacity = '0.3';
gear.style.pointerEvents = 'none';
gear.style.transform = 'translate(-50%, -50%)';
gear.style.transition = 'opacity 0.5s ease';
gear.style.zIndex = '9999';
gear.style.left = `${mouseX}px`;
gear.style.top = `${mouseY}px`;
document.body.appendChild(gear);
setTimeout(() => {
gear.style.opacity = '0';
setTimeout(() => {
document.body.removeChild(gear);
}, 500);
}, 300);
});
</script>
</body>
</html>
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
