分享一个Emoji 风格响应式单页网站，颜值超高、功能完整，非常适合前端学习和项目参考！
核心特点
- 响应式布局，适配手机 / 电脑
- 支持深色模式一键切换
- 丰富的动画效果，趣味十足
- 导航栏、产品展示、用户评价等完整模块
- 纯前端实现，开箱即用
完整代码如下，直接复制即可运行👇
[cv]
<!-- 墨桅博客 https://www.jetmast.com -->
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>✨ 墨桅博客 ✨</title>
<meta name="description" content="用表情符号点亮你的网站体验！我们提供最有趣、最生动的数字解决方案，让你的品牌脱颖而出。">
<meta name="keywords" content="Emoji, 网站设计, 数字服务, 创意设计, 技术开发">
<script src="https://cdn.tailwindcss.com">
</script>
<link href="https://lf6-cdn-tos.bytecdntp.com/cdn/expire-10-M/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
<script>
tailwind.config = {
darkMode: 'class',
theme: {
extend: {
colors: {
primary: '#FF6B6B',
secondary: '#4ECDC4',
accent: '#FFE66D',
dark: '#2C3E50',
light: '#F7F9FC'
},
fontFamily: {
emoji: ['"Segoe UI Emoji"', '"Apple Color Emoji"', '"Noto Color Emoji"', 'sans-serif']
},
animation: {
'bounce-slow': 'bounce 2s infinite',
'pulse-slow': 'pulse 3s infinite',
'spin-slow': 'spin 8s linear infinite',
'wiggle': 'wiggle 1s ease-in-out infinite',
'float': 'float 3s ease-in-out infinite',
'fade-in': 'fadeIn 0.5s ease-in-out',
'slide-up': 'slideUp 0.5s ease-out'
},
keyframes: {
wiggle: {
'0%, 100%': {
transform: 'rotate(-3deg)'
},
'50%': {
transform: 'rotate(3deg)'
}
},
float: {
'0%, 100%': {
transform: 'translateY(0)'
},
'50%': {
transform: 'translateY(-10px)'
}
},
fadeIn: {
'0%': {
opacity: '0'
},
'100%': {
opacity: '1'
}
},
slideUp: {
'0%': {
transform: 'translateY(20px)',
opacity: '0'
},
'100%': {
transform: 'translateY(0)',
opacity: '1'
}
}
}
}
}
}
</script>
<style type="text/tailwindcss">
@layer utilities {
.content-auto {
content-visibility: auto;
}
.emoji-lg {
font-size: 1.5rem;
line-height: 1;
}
.emoji-xl {
font-size: 2rem;
line-height: 1;
}
.emoji-2xl {
font-size: 3rem;
line-height: 1;
}
.text-shadow {
text-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}
.card-hover {
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.card-hover:hover {
transform: translateY(-8px);
box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
}
.scroll-smooth {
scroll-behavior: smooth;
}
.backdrop-blur {
backdrop-filter: blur(8px);
}
}
</style>
</head>
<body class="bg-light font-sans text-dark dark:bg-gray-900 dark:text-gray-100 transition-colors duration-300">
<div id="loader" class="fixed inset-0 z-50 flex items-center justify-center bg-white dark:bg-gray-900 transition-opacity duration-500">
<div class="text-center">
<div class="emoji-2xl animate-bounce mb-4">🚀</div>
<div class="text-xl font-bold text-primary">加载中...</div>
</div>
</div>
<nav class="bg-white dark:bg-gray-800 shadow-lg sticky top-0 z-40 transition-all duration-300" id="navbar">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="flex justify-between h-16">
<div class="flex items-center">
<a href="#" class="flex items-center space-x-2">
<span class="emoji-xl animate-float">🚀</span>
<span class="text-xl font-bold text-primary">墨桅博客</span>
</a>
</div>
<div class="hidden md:flex items-center space-x-8">
<a href="#home" class="flex items-center space-x-1 text-gray-700 dark:text-gray-300 hover:text-primary dark:hover:text-primary transition-colors duration-200">
<span class="emoji-lg">🏠</span>
<span>首页</span>
</a>
<a href="#features" class="flex items-center space-x-1 text-gray-700 dark:text-gray-300 hover:text-primary dark:hover:text-primary transition-colors duration-200">
<span class="emoji-lg">💡</span>
<span>特色</span>
</a>
<a href="#products" class="flex items-center space-x-1 text-gray-700 dark:text-gray-300 hover:text-primary dark:hover:text-primary transition-colors duration-200">
<span class="emoji-lg">📦</span>
<span>产品</span>
</a>
<a href="#testimonials" class="flex items-center space-x-1 text-gray-700 dark:text-gray-300 hover:text-primary dark:hover:text-primary transition-colors duration-200">
<span class="emoji-lg">💬</span>
<span>评价</span>
</a>
<a href="#contact" class="flex items-center space-x-1 text-gray-700 dark:text-gray-300 hover:text-primary dark:hover:text-primary transition-colors duration-200">
<span class="emoji-lg">📞</span>
<span>联系我们</span>
</a>
</div>
<div class="hidden md:flex items-center space-x-4">
<button id="theme-toggle" class="p-2 rounded-full hover:bg-gray-100 dark:hover:bg-gray-700 transition-colors duration-200" aria-label="切换主题">
<span class="emoji-lg dark:hidden">🌙</span>
<span class="emoji-lg hidden dark:inline">☀️</span>
</button>
<button class="p-2 rounded-full hover:bg-gray-100 dark:hover:bg-gray-700 transition-colors duration-200" aria-label="搜索">
<span class="emoji-lg">🔍</span>
</button>
<button class="p-2 rounded-full hover:bg-gray-100 dark:hover:bg-gray-700 transition-colors duration-200 relative" aria-label="购物车">
<span class="emoji-lg">🛒</span>
<span class="absolute -top-1 -right-1 bg-primary text-white text-xs rounded-full h-5 w-5 flex items-center justify-center">3</span>
</button>
<button class="p-2 rounded-full hover:bg-gray-100 dark:hover:bg-gray-700 transition-colors duration-200" aria-label="用户中心">
<span class="emoji-lg">👤</span>
</button>
</div>
<div class="md:hidden flex items-center space-x-2">
<button id="theme-toggle-mobile" class="p-2 rounded-full hover:bg-gray-100 dark:hover:bg-gray-700 transition-colors duration-200" aria-label="切换主题">
<span class="emoji-lg dark:hidden">🌙</span>
<span class="emoji-lg hidden dark:inline">☀️</span>
</button>
<button id="mobile-menu-button" class="p-2 rounded-md hover:bg-gray-100 dark:hover:bg-gray-700 transition-colors duration-200" aria-label="菜单">
<span class="emoji-xl">☰</span>
</button>
</div>
</div>
</div>
<div id="mobile-menu" class="md:hidden hidden bg-white dark:bg-gray-800 border-t dark:border-gray-700">
<div class="px-2 pt-2 pb-3 space-y-1 sm:px-3">
<a href="#home" class="flex items-center space-x-2 block px-3 py-2 rounded-md text-base font-medium text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700">
<span class="emoji-lg">🏠</span>
<span>首页</span>
</a>
<a href="#features" class="flex items-center space-x-2 block px-3 py-2 rounded-md text-base font-medium text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700">
<span class="emoji-lg">💡</span>
<span>特色</span>
</a>
<a href="#products" class="flex items-center space-x-2 block px-3 py-2 rounded-md text-base font-medium text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700">
<span class="emoji-lg">📦</span>
<span>产品</span>
</a>
<a href="#testimonials" class="flex items-center space-x-2 block px-3 py-2 rounded-md text-base font-medium text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700">
<span class="emoji-lg">💬</span>
<span>评价</span>
</a>
<a href="#contact" class="flex items-center space-x-2 block px-3 py-2 rounded-md text-base font-medium text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700">
<span class="emoji-lg">📞</span>
<span>联系我们</span>
</a>
<div class="flex items-center space-x-4 px-3 py-2">
<button class="p-2 rounded-full hover:bg-gray-100 dark:hover:bg-gray-700">
<span class="emoji-lg">🔍</span>
</button>
<button class="p-2 rounded-full hover:bg-gray-100 dark:hover:bg-gray-700 relative">
<span class="emoji-lg">🛒</span>
<span class="absolute -top-1 -right-1 bg-primary text-white text-xs rounded-full h-5 w-5 flex items-center justify-center">3</span>
</button>
<button class="p-2 rounded-full hover:bg-gray-100 dark:hover:bg-gray-700">
<span class="emoji-lg">👤</span>
</button>
</div>
</div>
</div>
</nav>
<section id="home" class="bg-gradient-to-r from-primary/90 to-secondary/90 text-white py-20 md:py-32">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="flex flex-col md:flex-row items-center">
<div class="md:w-1/2 mb-10 md:mb-0 animate-slide-up">
<h1 class="text-4xl md:text-5xl lg:text-6xl font-bold mb-6 text-shadow">
欢迎来到 <span class="text-accent">Emoji</span> 世界 🌟
</h1>
<p class="text-lg md:text-xl mb-8 text-white/90">
用表情符号点亮你的网站体验！我们提供最有趣、最生动的数字解决方案，让你的品牌脱颖而出。
</p>
<div class="flex flex-col sm:flex-row space-y-4 sm:space-y-0 sm:space-x-4">
<button class="bg-accent text-dark font-bold py-3 px-8 rounded-full hover:bg-accent/90 transform hover:scale-105 transition-all duration-200 shadow-lg flex items-center justify-center space-x-2">
<span>立即开始</span>
<span class="emoji-lg">🚀</span>
</button>
<button class="bg-transparent border-2 border-white text-white font-bold py-3 px-8 rounded-full hover:bg-white/10 transition-all duration-200 flex items-center justify-center space-x-2">
<span>了解更多</span>
<span class="emoji-lg">📖</span>
</button>
</div>
</div>
<div class="md:w-1/2 flex justify-center animate-fade-in">
<div class="relative">
<div class="emoji-2xl animate-bounce-slow absolute -top-10 -left-10">🎈</div>
<div class="emoji-2xl animate-pulse-slow absolute -top-5 right-0">✨</div>
<div class="emoji-2xl animate-float absolute bottom-0 -left-5">🌈</div>
<div class="emoji-2xl animate-spin-slow absolute -bottom-10 right-10">🎡</div>
<div class="emoji-2xl animate-wiggle text-center">
🎉🎊🎁<br>
🎨💻🎯<br>
🌟💎🔥
</div>
</div>
</div>
</div>
</div>
</section>
<section id="features" class="py-16 bg-white dark:bg-gray-800">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="text-center mb-16">
<h2 class="text-3xl md:text-4xl font-bold mb-4">我们的特色 ✨</h2>
<p class="text-gray-600 dark:text-gray-400 max-w-2xl mx-auto">
我们提供全方位的数字服务，帮助您的业务在竞争激烈的市场中脱颖而出
</p>
</div>
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
<div class="bg-light dark:bg-gray-700 rounded-xl p-8 card-hover shadow-md">
<div class="emoji-2xl mb-6 text-primary">🎨</div>
<h3 class="text-xl font-bold mb-3">创意设计</h3>
<p class="text-gray-600 dark:text-gray-300 mb-4">
独特的视觉设计，让您的品牌形象深入人心，吸引更多目标客户。
</p>
<a href="#" class="text-primary font-medium flex items-center space-x-1 hover:underline">
<span>了解更多</span>
<span>→</span>
</a>
</div>
<div class="bg-light dark:bg-gray-700 rounded-xl p-8 card-hover shadow-md">
<div class="emoji-2xl mb-6 text-secondary">💻</div>
<h3 class="text-xl font-bold mb-3">技术开发</h3>
<p class="text-gray-600 dark:text-gray-300 mb-4">
采用最新技术栈，打造高性能、可扩展的网站和应用程序。
</p>
<a href="#" class="text-primary font-medium flex items-center space-x-1 hover:underline">
<span>了解更多</span>
<span>→</span>
</a>
</div>
<div class="bg-light dark:bg-gray-700 rounded-xl p-8 card-hover shadow-md">
<div class="emoji-2xl mb-6 text-accent">📈</div>
<h3 class="text-xl font-bold mb-3">数字营销</h3>
<p class="text-gray-600 dark:text-gray-300 mb-4">
精准的营销策略，帮助您提升品牌知名度和转化率。
</p>
<a href="#" class="text-primary font-medium flex items-center space-x-1 hover:underline">
<span>了解更多</span>
<span>→</span>
</a>
</div>
<div class="bg-light dark:bg-gray-700 rounded-xl p-8 card-hover shadow-md">
<div class="emoji-2xl mb-6 text-purple-500">🔒</div>
<h3 class="text-xl font-bold mb-3">安全保障</h3>
<p class="text-gray-600 dark:text-gray-300 mb-4">
全方位的安全防护，保护您的数据和用户信息安全。
</p>
<a href="#" class="text-primary font-medium flex items-center space-x-1 hover:underline">
<span>了解更多</span>
<span>→</span>
</a>
</div>
<div class="bg-light dark:bg-gray-700 rounded-xl p-8 card-hover shadow-md">
<div class="emoji-2xl mb-6 text-green-500">⚡</div>
<h3 class="text-xl font-bold mb-3">极速响应</h3>
<p class="text-gray-600 dark:text-gray-300 mb-4">
优化的性能和加载速度，提供流畅的用户体验。
</p>
<a href="#" class="text-primary font-medium flex items-center space-x-1 hover:underline">
<span>了解更多</span>
<span>→</span>
</a>
</div>
<div class="bg-light dark:bg-gray-700 rounded-xl p-8 card-hover shadow-md">
<div class="emoji-2xl mb-6 text-orange-500">💬</div>
<h3 class="text-xl font-bold mb-3">24/7 支持</h3>
<p class="text-gray-600 dark:text-gray-300 mb-4">
全天候客户支持，随时解决您的问题和需求。
</p>
<a href="#" class="text-primary font-medium flex items-center space-x-1 hover:underline">
<span>了解更多</span>
<span>→</span>
</a>
</div>
</div>
</div>
</section>
<section id="products" class="py-16 bg-gray-50 dark:bg-gray-900">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="text-center mb-16">
<h2 class="text-3xl md:text-4xl font-bold mb-4">热门产品 🛍️</h2>
<p class="text-gray-600 dark:text-gray-400 max-w-2xl mx-auto">
探索我们最受欢迎的产品，为您的生活带来更多便利和乐趣
</p>
</div>
<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-6">
<div class="bg-white dark:bg-gray-800 rounded-xl overflow-hidden shadow-md card-hover">
<div class="h-48 bg-gradient-to-br from-pink-100 to-pink-200 dark:from-pink-900/30 dark:to-pink-800/30 flex items-center justify-center">
<span class="emoji-2xl">🎧</span>
</div>
<div class="p-6">
<h3 class="font-bold text-lg mb-2">无线耳机</h3>
<div class="flex items-center mb-2">
<span class="text-yellow-400">⭐⭐⭐⭐⭐</span>
<span class="text-gray-500 dark:text-gray-400 text-sm ml-2">(128)</span>
</div>
<p class="text-gray-600 dark:text-gray-400 text-sm mb-4">高品质音效，超长续航时间</p>
<div class="flex justify-between items-center">
<span class="font-bold text-primary">¥299</span>
<button class="bg-primary text-white p-2 rounded-full hover:bg-primary/90 transition-colors" aria-label="加入购物车">
<span class="emoji-lg">🛒</span>
</button>
</div>
</div>
</div>
<div class="bg-white dark:bg-gray-800 rounded-xl overflow-hidden shadow-md card-hover">
<div class="h-48 bg-gradient-to-br from-blue-100 to-blue-200 dark:from-blue-900/30 dark:to-blue-800/30 flex items-center justify-center">
<span class="emoji-2xl">⌚</span>
</div>
<div class="p-6">
<h3 class="font-bold text-lg mb-2">智能手表</h3>
<div class="flex items-center mb-2">
<span class="text-yellow-400">⭐⭐⭐⭐⭐</span>
<span class="text-gray-500 dark:text-gray-400 text-sm ml-2">(96)</span>
</div>
<p class="text-gray-600 dark:text-gray-400 text-sm mb-4">健康监测，多功能智能体验</p>
<div class="flex justify-between items-center">
<span class="font-bold text-primary">¥599</span>
<button class="bg-primary text-white p-2 rounded-full hover:bg-primary/90 transition-colors" aria-label="加入购物车">
<span class="emoji-lg">🛒</span>
</button>
</div>
</div>
</div>
<div class="bg-white dark:bg-gray-800 rounded-xl overflow-hidden shadow-md card-hover">
<div class="h-48 bg-gradient-to-br from-green-100 to-green-200 dark:from-green-900/30 dark:to-green-800/30 flex items-center justify-center">
<span class="emoji-2xl">📱</span>
</div>
<div class="p-6">
<h3 class="font-bold text-lg mb-2">手机支架</h3>
<div class="flex items-center mb-2">
<span class="text-yellow-400">⭐⭐⭐⭐</span>
<span class="text-gray-500 dark:text-gray-400 text-sm ml-2">(72)</span>
</div>
<p class="text-gray-600 dark:text-gray-400 text-sm mb-4">多角度调节，解放双手</p>
<div class="flex justify-between items-center">
<span class="font-bold text-primary">¥39</span>
<button class="bg-primary text-white p-2 rounded-full hover:bg-primary/90 transition-colors" aria-label="加入购物车">
<span class="emoji-lg">🛒</span>
</button>
</div>
</div>
</div>
<div class="bg-white dark:bg-gray-800 rounded-xl overflow-hidden shadow-md card-hover">
<div class="h-48 bg-gradient-to-br from-yellow-100 to-yellow-200 dark:from-yellow-900/30 dark:to-yellow-800/30 flex items-center justify-center">
<span class="emoji-2xl">🎮</span>
</div>
<div class="p-6">
<h3 class="font-bold text-lg mb-2">游戏手柄</h3>
<div class="flex items-center mb-2">
<span class="text-yellow-400">⭐⭐⭐⭐⭐</span>
<span class="text-gray-500 dark:text-gray-400 text-sm ml-2">(156)</span>
</div>
<p class="text-gray-600 dark:text-gray-400 text-sm mb-4">精准操控，沉浸式游戏体验</p>
<div class="flex justify-between items-center">
<span class="font-bold text-primary">¥199</span>
<button class="bg-primary text-white p-2 rounded-full hover:bg-primary/90 transition-colors" aria-label="加入购物车">
<span class="emoji-lg">🛒</span>
</button>
</div>
</div>
</div>
</div>
<div class="text-center mt-12">
<button class="bg-primary text-white font-bold py-3 px-8 rounded-full hover:bg-primary/90 transform hover:scale-105 transition-all duration-200 shadow-lg flex items-center justify-center space-x-2 mx-auto">
<span>查看全部产品</span>
<span class="emoji-lg">👀</span>
</button>
</div>
</div>
</section>
<section id="testimonials" class="py-16 bg-white dark:bg-gray-800">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="text-center mb-16">
<h2 class="text-3xl md:text-4xl font-bold mb-4">用户评价 💬</h2>
<p class="text-gray-600 dark:text-gray-400 max-w-2xl mx-auto">
听听我们的客户怎么说，他们的满意是我们最大的动力
</p>
</div>
<div class="grid grid-cols-1 md:grid-cols-3 gap-8">
<div class="bg-light dark:bg-gray-700 rounded-xl p-8 shadow-md">
<div class="flex items-center mb-4">
<div class="w-12 h-12 rounded-full bg-primary/10 dark:bg-primary/20 flex items-center justify-center mr-4">
<span class="emoji-lg">👩</span>
</div>
<div>
<h4 class="font-bold">张女士</h4>
<div class="text-yellow-400">⭐⭐⭐⭐⭐</div>
</div>
</div>
<p class="text-gray-600 dark:text-gray-300 italic">
"服务非常专业，网站设计得很漂亮，完全符合我的预期。上线后效果很好，客户反馈都很积极！"
</p>
</div>
<div class="bg-light dark:bg-gray-700 rounded-xl p-8 shadow-md">
<div class="flex items-center mb-4">
<div class="w-12 h-12 rounded-full bg-secondary/10 dark:bg-secondary/20 flex items-center justify-center mr-4">
<span class="emoji-lg">👨</span>
</div>
<div>
<h4 class="font-bold">李先生</h4>
<div class="text-yellow-400">⭐⭐⭐⭐⭐</div>
</div>
</div>
<p class="text-gray-600 dark:text-gray-300 italic">
"技术团队很给力，响应速度快，解决问题也很及时。合作非常愉快，下次还会选择他们！"
</p>
</div>
<div class="bg-light dark:bg-gray-700 rounded-xl p-8 shadow-md">
<div class="flex items-center mb-4">
<div class="w-12 h-12 rounded-full bg-accent/10 dark:bg-accent/20 flex items-center justify-center mr-4">
<span class="emoji-lg">👩💼</span>
</div>
<div>
<h4 class="font-bold">王经理</h4>
<div class="text-yellow-400">⭐⭐⭐⭐⭐</div>
</div>
</div>
<p class="text-gray-600 dark:text-gray-300 italic">
"从设计到开发再到上线，全程都很顺利。他们不仅技术好，还很有创意，推荐给大家！"
</p>
</div>
</div>
</div>
</section>
<section id="contact" class="py-20 bg-gradient-to-r from-dark to-gray-800 text-white">
<div class="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8 text-center">
<h2 class="text-3xl md:text-4xl font-bold mb-6">准备好开始了吗？ 🚀</h2>
<p class="text-lg mb-8 text-white/80 max-w-2xl mx-auto">
立即联系我们，让我们一起打造属于您的精彩网站，开启数字化之旅！
</p>
<div class="flex flex-col sm:flex-row justify-center space-y-4 sm:space-y-0 sm:space-x-4">
<button class="bg-primary text-white font-bold py-3 px-8 rounded-full hover:bg-primary/90 transform hover:scale-105 transition-all duration-200 shadow-lg flex items-center justify-center space-x-2">
<span>免费咨询</span>
<span class="emoji-lg">📞</span>
</button>
<button class="bg-transparent border-2 border-white text-white font-bold py-3 px-8 rounded-full hover:bg-white/10 transition-all duration-200 flex items-center justify-center space-x-2">
<span>查看案例</span>
<span class="emoji-lg">📁</span>
</button>
</div>
</div>
</section>
<footer class="bg-dark text-white py-12">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="grid grid-cols-1 md:grid-cols-4 gap-8">
<div>
<div class="flex items-center space-x-2 mb-4">
<span class="emoji-xl">🚀</span>
<span class="text-xl font-bold">墨桅博客</span>
</div>
<p class="text-gray-400 mb-4">
用表情符号点亮你的网站体验，让数字世界更加生动有趣。
</p>
<div class="flex space-x-4">
<a href="https://www.jetmast.com" class="text-gray-400 hover:text-white transition-colors" aria-label="Facebook">
<span class="emoji-lg">📘</span>
</a>
<a href="https://www.jetmast.com" class="text-gray-400 hover:text-white transition-colors" aria-label="Twitter">
<span class="emoji-lg">🐦</span>
</a>
<a href="https://www.jetmast.com" class="text-gray-400 hover:text-white transition-colors" aria-label="Instagram">
<span class="emoji-lg">📷</span>
</a>
<a href="https://www.jetmast.com" class="text-gray-400 hover:text-white transition-colors" aria-label="LinkedIn">
<span class="emoji-lg">💼</span>
</a>
</div>
</div>
<div>
<h4 class="font-bold text-lg mb-4">快速链接</h4>
<ul class="space-y-2">
<li><a href="#home" class="text-gray-400 hover:text-white transition-colors flex items-center space-x-1"><span>🏠</span><span>首页</span></a></li>
<li><a href="#features" class="text-gray-400 hover:text-white transition-colors flex items-center space-x-1"><span>💡</span><span>特色</span></a></li>
<li><a href="#products" class="text-gray-400 hover:text-white transition-colors flex items-center space-x-1"><span>📦</span><span>产品</span></a></li>
<li><a href="#testimonials" class="text-gray-400 hover:text-white transition-colors flex items-center space-x-1"><span>💬</span><span>评价</span></a></li>
</ul>
</div>
<div>
<h4 class="font-bold text-lg mb-4">服务项目</h4>
<ul class="space-y-2">
<li><a href="#" class="text-gray-400 hover:text-white transition-colors flex items-center space-x-1"><span>🎨</span><span>网站设计</span></a></li>
<li><a href="#" class="text-gray-400 hover:text-white transition-colors flex items-center space-x-1"><span>💻</span><span>开发服务</span></a></li>
<li><a href="#" class="text-gray-400 hover:text-white transition-colors flex items-center space-x-1"><span>📈</span><span>数字营销</span></a></li>
<li><a href="#" class="text-gray-400 hover:text-white transition-colors flex items-center space-x-1"><span>🔧</span><span>技术支持</span></a></li>
</ul>
</div>
<div>
<h4 class="font-bold text-lg mb-4">联系我们</h4>
<ul class="space-y-2">
<li class="flex items-center space-x-2 text-gray-400">
<span>📍</span>
<span>北京市朝阳区某某大厦</span>
</li>
<li class="flex items-center space-x-2 text-gray-400">
<span>💬</span>
<span>QQ: 910049360</span>
</li>
<li class="flex items-center space-x-2 text-gray-400">
<span>💬</span>
<span>微信: JetMast</span>
</li>
<li class="flex items-center space-x-2 text-gray-400">
<span>📧</span>
<span>JetMast@qq.com</span>
</li>
<li class="flex items-center space-x-2 text-gray-400">
<span>⏰</span>
<span>周一至周五 9:00-18:00</span>
</li>
</ul>
</div>
</div>
<div class="border-t border-gray-700 mt-12 pt-8 text-center text-gray-400">
<p>© 2025 墨桅博客. 保留所有权利。用 ❤️ 和 ☕ 制作</p>
</div>
</div>
</footer>
<button id="back-to-top" class="fixed bottom-8 right-8 bg-primary text-white p-3 rounded-full shadow-lg opacity-0 invisible transition-all duration-300 hover:bg-primary/90 z-30" aria-label="回到顶部">
<span class="emoji-lg">⬆️</span>
</button>
<script>
window.addEventListener('load', () => {
const loader = document.getElementById('loader');
setTimeout(() => {
loader.style.opacity = '0';
setTimeout(() => {
loader.style.display = 'none';
}, 500);
}, 800);
});
const mobileMenuButton = document.getElementById('mobile-menu-button');
const mobileMenu = document.getElementById('mobile-menu');
mobileMenuButton.addEventListener('click', () => {
mobileMenu.classList.toggle('hidden');
const isOpen = !mobileMenu.classList.contains('hidden');
mobileMenuButton.setAttribute('aria-expanded', isOpen);
mobileMenuButton.innerHTML = isOpen ? '<span class="emoji-xl">✖️</span>' :
'<span class="emoji-xl">☰</span>';
});
const navbar = document.getElementById('navbar');
window.addEventListener('scroll', () => {
if (window.scrollY > 50) {
navbar.classList.add('bg-white/95', 'dark:bg-gray-800/95', 'backdrop-blur');
navbar.classList.remove('bg-white', 'dark:bg-gray-800');
} else {
navbar.classList.remove('bg-white/95', 'dark:bg-gray-800/95', 'backdrop-blur');
navbar.classList.add('bg-white', 'dark:bg-gray-800');
}
const backToTop = document.getElementById('back-to-top');
if (window.scrollY > 300) {
backToTop.classList.remove('opacity-0', 'invisible');
backToTop.classList.add('opacity-100', 'visible');
} else {
backToTop.classList.add('opacity-0', 'invisible');
backToTop.classList.remove('opacity-100', 'visible');
}
});
document.getElementById('back-to-top').addEventListener('click', () => {
window.scrollTo({
top: 0,
behavior: 'smooth'
});
});
document.querySelectorAll('a[href^="#"]').forEach(anchor => {
anchor.addEventListener('click', function(e) {
e.preventDefault();
const targetId = this.getAttribute('href');
if (targetId === '#') return;
const targetElement = document.querySelector(targetId);
if (targetElement) {
targetElement.scrollIntoView({
behavior: 'smooth'
});
if (!mobileMenu.classList.contains('hidden')) {
mobileMenu.classList.add('hidden');
mobileMenuButton.innerHTML = '<span class="emoji-xl">☰</span>';
}
}
});
});
document.querySelectorAll('.card-hover').forEach(card => {
card.addEventListener('mouseenter', () => {
const emoji = card.querySelector('.emoji-2xl');
if (emoji) {
emoji.classList.add('animate-bounce');
setTimeout(() => {
emoji.classList.remove('animate-bounce');
}, 1000);
}
});
});
const themeToggle = document.getElementById('theme-toggle');
const themeToggleMobile = document.getElementById('theme-toggle-mobile');
if (window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches) {
document.documentElement.classList.add('dark');
}
function toggleTheme() {
document.documentElement.classList.toggle('dark');
const isDark = document.documentElement.classList.contains('dark');
localStorage.setItem('theme', isDark ? 'dark' : 'light');
}
const savedTheme = localStorage.getItem('theme');
if (savedTheme === 'dark') {
document.documentElement.classList.add('dark');
} else if (savedTheme === 'light') {
document.documentElement.classList.remove('dark');
}
themeToggle.addEventListener('click', toggleTheme);
themeToggleMobile.addEventListener('click', toggleTheme);
window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', (e) => {
if (!localStorage.getItem('theme')) {
if (e.matches) {
document.documentElement.classList.add('dark');
} else {
document.documentElement.classList.remove('dark');
}
}
});
</script>
</body>
</html>
发表评论