源码封面
这个页面是在【豆包APP】上面的AI编程生成的，自己就改了一下文字。如果你也喜欢这个那就下载来做一个主页或者官网吧！
在根目录创建一个index.html 然后复制粘贴进去。最后修改文字即可使用。
有能力的小伙伴，自己可以改改，效果不错记得发我使用。嘻嘻...
代码如下：
[hide type=comment]
<!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="keywords" content="樊不烦,纯欲网,Fanbu.fan"/>
<meta name="description" content="樊不烦(FanBu.Fan)-纯欲网络科技是川渝知名Seo个人日记资源教程分享平台。"/>
<link rel="shortcut icon" href="https://fanbu.fan/favicon.png">
<!-- Tailwind CSS v3 -->
<script src="https://cdn.tailwindcss.com"></script>
<!-- Font Awesome -->
<link href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css" rel="stylesheet">
<!-- Google Fonts -->
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=Poppins:wght@400;500;600;700&display=swap" rel="stylesheet">
<!-- Tailwind 配置 -->
<script>
tailwind.config = {
theme: {
extend: {
colors: {
primary: '#7E57C2', // 主色调：紫色
secondary: '#FF80AB', // 辅助色：粉色
accent: '#29B6F6', // 强调色：蓝色
dark: '#2A2A2A', // 深色
light: '#F5F5F5', // 浅色
},
fontFamily: {
sans: ['Inter', 'sans-serif'],
display: ['Poppins', 'sans-serif'],
},
}
}
}
</script>
<!-- 自定义工具类 -->
<style type="text/tailwindcss">
@layer utilities {
.content-auto {
content-visibility: auto;
}
.text-shadow {
text-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}
.text-shadow-lg {
text-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}
.animate-float {
animation: float 6s ease-in-out infinite;
}
.animate-pulse-slow {
animation: pulse 4s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}
.backdrop-blur {
backdrop-filter: blur(8px);
}
.scrollbar-hide::-webkit-scrollbar {
display: none;
}
.glass-effect {
background: rgba(255, 255, 255, 0.25);
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
border: 1px solid rgba(255, 255, 255, 0.18);
}
.bg-grid {
background-image:
radial-gradient(#7E57C210 1px, transparent 1px),
radial-gradient(#FF80AB10 1px, transparent 1px);
background-size: 50px 50px;
background-position: 0 0, 25px 25px;
}
}
@keyframes float {
0% { transform: translateY(0px); }
50% { transform: translateY(-15px); }
100% { transform: translateY(0px); }
}
</style>
<style>
body {
background-color: #f8f9fa;
background-image:
radial-gradient(#7E57C210 1px, transparent 1px),
radial-gradient(#FF80AB10 1px, transparent 1px);
background-size: 50px 50px;
background-position: 0 0, 25px 25px;
}
.nav-card {
transition: all 0.3s ease;
}
.nav-card:hover {
transform: translateY(-5px);
box-shadow: 0 10px 25px -5px rgba(126, 87, 194, 0.2);
}
.category-title {
position: relative;
padding-left: 1.5rem;
}
.category-title::before {
content: '';
position: absolute;
left: 0;
top: 50%;
transform: translateY(-50%);
width: 8px;
height: 8px;
border-radius: 50%;
background-color: var(--accent-color, #7E57C2);
}
/* 粒子效果 */
.particles {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: -1;
overflow: hidden;
}
.particle {
position: absolute;
border-radius: 50%;
opacity: 0.6;
animation: float 8s ease-in-out infinite;
}
/* 滚动动画 */
.fade-in-section {
opacity: 0;
transform: translateY(20px);
transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}
.fade-in-section.is-visible {
opacity: 1;
transform: translateY(0);
}
/* 自定义动画 */
.typing-animation::after {
content: '|';
animation: typing 1s infinite;
}
@keyframes typing {
0%, 100% { opacity: 1; }
50% { opacity: 0; }
}
.skill-progress {
transition: width 1.5s ease-in-out;
}
.card-hover {
transition: all 0.3s ease;
}
.card-hover:hover {
transform: translateY(-8px) scale(1.02);
}
/* 人生进度条 */
.life-progress {
height: 8px;
background: #e0e0e0;
border-radius: 4px;
overflow: hidden;
}
.life-progress-fill {
height: 100%;
background: linear-gradient(90deg, #7E57C2 0%, #FF80AB 100%);
transition: width 1.5s ease-in-out;
}
</style>
</head>
<body class="font-sans text-dark min-h-screen bg-grid">
<!-- 粒子背景 -->
<div class="particles"></div>
<!-- 导航栏 -->
<nav class="fixed top-0 left-0 w-full z-50 transition-all duration-300" id="navbar">
<div class="container mx-auto px-4 py-3 flex justify-between items-center">
<a href="#" class="text-primary font-bold text-xl flex items-center">
<i class="fa fa-star mr-2"></i>
<span>纯欲网络科技</span>
</a>
<!-- 移动端菜单按钮 -->
<button class="md:hidden text-dark focus:outline-none" id="menu-toggle">
<i class="fa fa-bars text-2xl"></i>
</button>
<!-- 桌面端导航链接 -->
<ul class="hidden md:flex space-x-8">
<li><a href="#home" class="font-medium hover:text-primary transition-colors">首页</a></li>
<li><a href="#about" class="font-medium hover:text-primary transition-colors">关于我</a></li>
<li><a href="#interests" class="font-medium hover:text-primary transition-colors">兴趣爱好</a></li>
<li><a href="#life" class="font-medium hover:text-primary transition-colors">人生进度</a></li>
<li><a href="#links" class="font-medium hover:text-primary transition-colors">友情链接</a></li>
</ul>
</div>
<!-- 移动端菜单 -->
<div class="md:hidden bg-white shadow-lg absolute w-full left-0 top-full transform -translate-y-full opacity-0 transition-all duration-300 invisible" id="mobile-menu">
<ul class="px-4 py-3 space-y-4">
<li><a href="#home" class="block font-medium hover:text-primary transition-colors">首页</a></li>
<li><a href="#about" class="block font-medium hover:text-primary transition-colors">关于我</a></li>
<li><a href="#interests" class="block font-medium hover:text-primary transition-colors">兴趣爱好</a></li>
<li><a href="#life" class="block font-medium hover:text-primary transition-colors">人生进度</a></li>
<li><a href="#links" class="block font-medium hover:text-primary transition-colors">友情链接</a></li>
</ul>
</div>
</nav>
<!-- 首页/英雄区 - 使用视频背景 -->
<section id="home" class="min-h-screen relative flex items-center justify-center overflow-hidden">
<!-- 视频背景 -->
<div class="absolute inset-0 z-0">
<div class="absolute inset-0 bg-black/50 z-10"></div>
<!-- <img src="https://picsum.photos/seed/background/1920/1080" alt="背景图" class="w-full h-full object-cover">
如果想用视频替换图片，取消下面注释并注释上面的img标签-->
<video autoplay muted loop class="w-full h-full object-cover">
<source src="https://img-baofun.zhhainiao.com/pcwallpaper_ugc/preview/5510bb4690482836d0c02669826adeb0_preview.mp4" type="video/mp4">
</video>
</div>
<div class="container mx-auto px-4 z-20 text-center">
<div class="relative inline-block mb-8">
<div class="w-32 h-32 md:w-40 md:h-40 rounded-full bg-gradient-to-br from-primary to-accent flex items-center justify-center mx-auto mb-4 animate-pulse-slow overflow-hidden border-4 border-white shadow-xl">
<img src="https://q1.qlogo.cn/g?b=qq&nk=1629510&s=640" alt="个人头像" class="w-full h-full object-cover">
</div>
<div class="absolute -bottom-2 -right-2 w-10 h-10 bg-secondary rounded-full flex items-center justify-center shadow-lg">
<i class="fa fa-heart text-white animate-pulse"></i>
</div>
</div>
<h1 class="font-display font-bold text-[clamp(2rem,5vw,3.5rem)] text-white text-shadow-lg mb-4">
您好，我是<span class="text-primary">樊 鑫 </span>
</h1>
<p class="text-[clamp(1.2rem,3vw,1.8rem)] text-white/90 max-w-2xl mx-auto mb-8 typing-animation">
二次元动漫爱好者 & 个人博主
</p>
<div class="flex flex-wrap justify-center gap-4 mb-12">
<a href="#about" class="px-6 py-3 bg-primary text-white rounded-full shadow-md hover:shadow-lg transition-all hover:bg-primary/90 flex items-center">
<i class="fa fa-user mr-2"></i> 了解更多
</a>
<a href="#contact" class="px-6 py-3 bg-white/10 backdrop-blur text-white border border-white/30 rounded-full shadow-md hover:shadow-lg transition-all hover:bg-white/20 flex items-center">
<i class="fa fa-envelope mr-2"></i> 联系我
</a>
</div>
<!-- 访问统计 -->
<div class="glass-effect p-4 rounded-xl inline-block">
<div class="flex items-center space-x-6">
<div class="text-center">
<p class="text-white/80 text-sm">今日访问</p>
<p class="text-white font-bold text-xl" id="today-visits">0</p>
</div>
<div class="h-10 w-px bg-white/20"></div>
<div class="text-center">
<p class="text-white/80 text-sm">总访问量</p>
<p class="text-white font-bold text-xl" id="total-visits">0</p>
</div>
</div>
</div>
</div>
<!-- 向下滚动指示 -->
<div class="absolute bottom-10 left-1/2 transform -translate-x-1/2 animate-bounce">
<a href="#about" class="text-white/80 hover:text-white transition-colors">
<i class="fa fa-angle-down text-3xl"></i>
</a>
</div>
</section>
<main class="container mx-auto px-4 py-24 max-w-6xl">
<!-- 关于我 -->
<section id="about" class="py-20 fade-in-section">
<h2 class="category-title font-display font-semibold text-2xl md:text-3xl mb-10 text-center" style="--accent-color: #7E57C2">
关于我
</h2>
<div class="grid grid-cols-1 md:grid-cols-2 gap-10 items-center">
<div class="relative">
<div class="rounded-2xl overflow-hidden shadow-xl">
<!-- <img src="https://picsum.photos/seed/about/600/800" alt="个人照片" class="w-full h-auto">-->
<video autoplay muted loop class="w-full h-full object-cover">
<source src="https://www.fanbu.fan/1.mp4" type="video/mp4">
</video>
</div>
<div class="absolute -bottom-5 -right-5 bg-white p-4 rounded-xl shadow-lg max-w-xs">
<div class="flex items-center">
<div class="w-12 h-12 rounded-full bg-primary/10 flex items-center justify-center mr-3">
<i class="fa fa-quote-left text-primary"></i>
</div>
<div>
<p class="text-gray-700 italic">"不断探索二次元世界无限可能"</p>
<p class="text-primary font-medium mt-1">—— 樊 鑫</p>
</div>
</div>
</div>
</div>
<div>
<h3 class="font-display font-semibold text-xl mb-4">大家好，我是樊 鑫</h3>
<p class="text-gray-700 mb-6 leading-relaxed">
我是一名热爱二次元动漫文化的个人博主。
</p>
<p class="text-gray-700 mb-6 leading-relaxed">
除了爱动漫，我也是一家广告公司的师傅。我相信生活中充满了创意和惊喜，只要我们愿意去发现。
</p>
<!-- 个人信息 -->
<div class="grid grid-cols-1 sm:grid-cols-2 gap-4 mb-8">
<div class="flex items-center">
<i class="fa fa-birthday-cake text-primary mr-3"></i>
<span>1998年3月2日</span>
</div>
<div class="flex items-center">
<i class="fa fa-map-marker text-primary mr-3"></i>
<span>中国·南充</span>
</div>
<div class="flex items-center">
<i class="fa fa-envelope text-primary mr-3"></i>
<span>1629510@qq.com</span>
</div>
<div class="flex items-center">
<i class="fa fa-phone text-primary mr-3"></i>
<span>+86 17581721520（同微信）</span>
</div>
</div>
<a href="#contact" class="inline-flex items-center px-6 py-3 bg-primary text-white rounded-full shadow-md hover:shadow-lg transition-all hover:bg-primary/90">
<i class="fa fa-download mr-2"></i> 樊不烦博客
</a>
</div>
</div>
</section>
<!-- 兴趣爱好 -->
<section id="interests" class="py-20 fade-in-section">
<h2 class="category-title font-display font-semibold text-2xl md:text-3xl mb-10 text-center" style="--accent-color: #FF80AB">
兴趣爱好
</h2>
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
<!-- 兴趣卡片 -->
<div class="bg-white rounded-xl p-6 shadow-md hover:shadow-lg transition-all card-hover">
<div class="w-14 h-14 rounded-full bg-primary/10 flex items-center justify-center mb-4">
<i class="fa fa-gamepad text-primary text-2xl"></i>
</div>
<h3 class="font-display font-semibold text-xl mb-3">英雄联盟手游</h3>
<p class="text-gray-600"> 微信安卓区 [ 樊不烦 ] 联盟在现招人... 佛系养老</p>
</div>
<!-- 兴趣卡片 -->
<div class="bg-white rounded-xl p-6 shadow-md hover:shadow-lg transition-all card-hover">
<div class="w-14 h-14 rounded-full bg-secondary/10 flex items-center justify-center mb-4">
<i class="fa fa-pencil text-secondary text-2xl"></i>
</div>
<h3 class="font-display font-semibold text-xl mb-3">和平精英</h3>
<p class="text-gray-600">微信安卓区 [ ·樊不烦· ] 军团在现招人... 佛系养老</p>
</div>
<!-- 兴趣卡片 -->
<div class="bg-white rounded-xl p-6 shadow-md hover:shadow-lg transition-all card-hover">
<div class="w-14 h-14 rounded-full bg-accent/10 flex items-center justify-center mb-4">
<i class="fa fa-book text-accent text-2xl"></i>
</div>
<h3 class="font-display font-semibold text-xl mb-3">漫画阅读</h3>
<p class="text-gray-600">色色漫画很不错哟。</p>
</div>
<!-- 兴趣卡片 -->
<div class="bg-white rounded-xl p-6 shadow-md hover:shadow-lg transition-all card-hover">
<div class="w-14 h-14 rounded-full bg-primary/10 flex items-center justify-center mb-4">
<i class="fa fa-music text-primary text-2xl"></i>
</div>
<h3 class="font-display font-semibold text-xl mb-3">樊不烦音乐</h3>
<p class="text-gray-600">热爱各种动漫原声音乐，以及热门流行音乐歌曲。</p>
</div>
<!-- 兴趣卡片 -->
<div class="bg-white rounded-xl p-6 shadow-md hover:shadow-lg transition-all card-hover">
<div class="w-14 h-14 rounded-full bg-secondary/10 flex items-center justify-center mb-4">
<i class="fa fa-film text-secondary text-2xl"></i>
</div>
<h3 class="font-display font-semibold text-xl mb-3">动画动漫</h3>
<p class="text-gray-600">每周都会观看新的动画作品，从经典老番到最新季番都有关注。最喜欢的动漫包括《龙族》和《仙逆》以及《紫川》等。</p>
</div>
<!-- 兴趣卡片 -->
<div class="bg-white rounded-xl p-6 shadow-md hover:shadow-lg transition-all card-hover">
<div class="w-14 h-14 rounded-full bg-accent/10 flex items-center justify-center mb-4">
<i class="fa fa-camera text-accent text-2xl"></i>
</div>
<h3 class="font-display font-semibold text-xl mb-3">自恋的爱拍</h3>
<p class="text-gray-600">偶尔兴奋时会拍一些自恋搞怪的自拍，以及好的风景。</p>
</div>
</div>
</section>
<!-- 人生进度 -->
<section id="life" class="py-20 fade-in-section">
<h2 class="category-title font-display font-semibold text-2xl md:text-3xl mb-10 text-center" style="--accent-color: #29B6F6">
人生进度
</h2>
<div class="bg-white rounded-xl p-8 shadow-lg">
<div class="mb-8">
<div class="flex justify-between mb-2">
<h3 class="font-medium">人生总体进度</h3>
<span class="text-primary font-bold" id="life-percentage">25%</span>
</div>
<div class="life-progress">
<div class="life-progress-fill" style="width: 0%"></div>
</div>
</div>
<div class="grid grid-cols-1 md:grid-cols-2 gap-6">
<div>
<h4 class="font-medium mb-3">学习与成长</h4>
<div class="space-y-4">
<div>
<div class="flex justify-between mb-1">
<span class="text-sm">专业技能</span>
<span class="text-sm font-medium">60%</span>
</div>
<div class="h-2 bg-gray-100 rounded-full overflow-hidden">
<div class="h-full bg-primary skill-progress" style="width: 0%" data-width="60%"></div>
</div>
</div>
<div>
<div class="flex justify-between mb-1">
<span class="text-sm">知识储备</span>
<span class="text-sm font-medium">45%</span>
</div>
<div class="h-2 bg-gray-100 rounded-full overflow-hidden">
<div class="h-full bg-primary skill-progress" style="width: 0%" data-width="45%"></div>
</div>
</div>
<div>
<div class="flex justify-between mb-1">
<span class="text-sm">语言能力</span>
<span class="text-sm font-medium">50%</span>
</div>
<div class="h-2 bg-gray-100 rounded-full overflow-hidden">
<div class="h-full bg-primary skill-progress" style="width: 0%" data-width="50%"></div>
</div>
</div>
</div>
</div>
<div>
<h4 class="font-medium mb-3">生活与体验</h4>
<div class="space-y-4">
<div>
<div class="flex justify-between mb-1">
<span class="text-sm">旅行经历</span>
<span class="text-sm font-medium">10%</span>
</div>
<div class="h-2 bg-gray-100 rounded-full overflow-hidden">
<div class="h-full bg-secondary skill-progress" style="width: 0%" data-width="10%"></div>
</div>
</div>
<div>
<div class="flex justify-between mb-1">
<span class="text-sm">兴趣培养</span>
<span class="text-sm font-medium">80%</span>
</div>
<div class="h-2 bg-gray-100 rounded-full overflow-hidden">
<div class="h-full bg-secondary skill-progress" style="width: 0%" data-width="80%"></div>
</div>
</div>
<div>
<div class="flex justify-between mb-1">
<span class="text-sm">人际关系</span>
<span class="text-sm font-medium">70%</span>
</div>
<div class="h-2 bg-gray-100 rounded-full overflow-hidden">
<div class="h-full bg-secondary skill-progress" style="width: 0%" data-width="70%"></div>
</div>
</div>
</div>
</div>
</div>
<!-- 人生阶段时间线 -->
<div class="mt-12">
<h4 class="font-medium mb-6">人生阶段</h4>
<div class="relative">
<!-- 时间线 -->
<div class="absolute left-4 top-0 bottom-0 w-0.5 bg-gray-200"></div>
<!-- 阶段1 -->
<div class="relative pl-12 mb-8">
<div class="absolute left-0 top-0 w-8 h-8 rounded-full bg-primary flex items-center justify-center">
<i class="fa fa-graduation-cap text-white"></i>
</div>
<h5 class="font-semibold text-lg">教育阶段</h5>
<p class="text-gray-500 text-sm">2000 - 2014</p>
<p class="mt-2 text-gray-600">未完成了小学。完成了早早辍学</p>
</div>
<!-- 阶段2 -->
<div class="relative pl-12 mb-8">
<div class="absolute left-0 top-0 w-8 h-8 rounded-full bg-secondary flex items-center justify-center">
<i class="fa fa-briefcase text-white"></i>
</div>
<h5 class="font-semibold text-lg">职业生涯</h5>
<p class="text-gray-500 text-sm">2015 - 至今</p>
<p class="mt-2 text-gray-600">开始从事广告、家装等工作。</p>
</div>
<!-- 阶段3 -->
<div class="relative pl-12">
<div class="absolute left-0 top-0 w-8 h-8 rounded-full bg-accent flex items-center justify-center">
<i class="fa fa-rocket text-white"></i>
</div>
<h5 class="font-semibold text-lg">未来规划</h5>
<p class="text-gray-500 text-sm">2025 - 未来</p>
<p class="mt-2 text-gray-600">稳定工作，早点还清债务。存点钱享受人生。</p>
</div>
</div>
</div>
</div>
</section>
<footer class=" ">
<p class="text-center text-gray-500 text-sm">
© 2025 <a href="#" class="" title="樊不烦-纯欲网络科技">樊不烦-纯欲网络科技. </a>保留所有权利.
</p>
</footer>
<script>
// 波浪动画效果
document.addEventListener('DOMContentLoaded', function() {
const waves = document.querySelectorAll('svg path');
waves.forEach((wave, index) => {
const duration = 15 + index * 5; // 每个波浪不同的动画周期
wave.style.animation = `wave ${duration}s linear infinite`;
});
});
// 波浪动画关键帧
const style = document.createElement('style');
style.textContent = `
@keyframes wave {
0% {
transform: translateX(0);
}
50% {
transform: translateX(-25%);
}
100% {
transform: translateX(-50%);
}
}
`;
document.head.appendChild(style);
</script>
<!-- 返回顶部按钮 -->
<button id="back-to-top" class="fixed bottom-6 right-6 w-12 h-12 rounded-full bg-primary text-white shadow-lg flex items-center justify-center opacity-0 invisible transition-all duration-300 hover:bg-primary/90">
<i class="fa fa-arrow-up"></i>
</button>
<!-- JavaScript -->
<script>
// 创建粒子效果
function createParticles() {
const particlesContainer = document.querySelector('.particles');
const particleCount = 50;
for (let i = 0; i < particleCount; i++) {
const particle = document.createElement('div');
particle.classList.add('particle');
// 随机大小
const size = Math.random() * 5 + 1;
particle.style.width = `${size}px`;
particle.style.height = `${size}px`;
// 随机位置
const x = Math.random() * 100;
const y = Math.random() * 100;
particle.style.left = `${x}%`;
particle.style.top = `${y}%`;
// 随机颜色
const colors = ['#7E57C2', '#FF80AB', '#29B6F6'];
const color = colors[Math.floor(Math.random() * colors.length)];
particle.style.backgroundColor = color;
// 随机动画
const duration = Math.random() * 20 + 10;
const delay = Math.random() * 5;
particle.style.animation = `float ${duration}s ease-in-out ${delay}s infinite`;
particlesContainer.appendChild(particle);
}
}
// 滚动动画
function checkFadeElements() {
const fadeElements = document.querySelectorAll('.fade-in-section');
fadeElements.forEach(element => {
const elementTop = element.getBoundingClientRect().top;
const windowHeight = window.innerHeight;
if (elementTop < windowHeight * 0.85) {
element.classList.add('is-visible');
// 如果是技能条部分，启动动画
if (element.id === 'skills' || element.id === 'life') {
animateSkillBars();
animateLifeProgress();
}
}
});
}
// 技能条动画
function animateSkillBars() {
const skillBars = document.querySelectorAll('.skill-progress');
skillBars.forEach(bar => {
const width = bar.getAttribute('data-width');
bar.style.width = width;
});
}
// 人生进度条动画
function animateLifeProgress() {
const lifeProgress = document.querySelector('.life-progress-fill');
const lifePercentage = document.getElementById('life-percentage');
// 假设25岁，人生按80岁计算
const age = 25;
const totalAge = 80;
const percentage = Math.round((age / totalAge) * 100);
lifeProgress.style.width = `${percentage}%`;
lifePercentage.textContent = `${percentage}%`;
}
// 导航栏滚动效果
function handleNavbarScroll() {
const navbar = document.getElementById('navbar');
const backToTop = document.getElementById('back-to-top');
if (window.scrollY > 100) {
navbar.classList.add('bg-white', 'shadow-md');
navbar.classList.remove('py-3');
navbar.classList.add('py-2');
backToTop.classList.remove('opacity-0', 'invisible');
backToTop.classList.add('opacity-100', 'visible');
} else {
navbar.classList.remove('bg-white', 'shadow-md');
navbar.classList.remove('py-2');
navbar.classList.add('py-3');
backToTop.classList.add('opacity-0', 'invisible');
backToTop.classList.remove('opacity-100', 'visible');
}
}
// 移动端菜单切换
function setupMobileMenu() {
const menuToggle = document.getElementById('menu-toggle');
const mobileMenu = document.getElementById('mobile-menu');
menuToggle.addEventListener('click', () => {
if (mobileMenu.classList.contains('invisible')) {
mobileMenu.classList.remove('invisible', 'opacity-0', '-translate-y-full');
mobileMenu.classList.add('opacity-100', 'translate-y-0');
menuToggle.innerHTML = '<i class="fa fa-times text-2xl"></i>';
} else {
mobileMenu.classList.add('invisible', 'opacity-0', '-translate-y-full');
mobileMenu.classList.remove('opacity-100', 'translate-y-0');
menuToggle.innerHTML = '<i class="fa fa-bars text-2xl"></i>';
}
});
}
// 平滑滚动
function setupSmoothScroll() {
document.querySelectorAll('a[href^="#"]').forEach(anchor => {
anchor.addEventListener('click', function (e) {
e.preventDefault();
// 如果是移动端菜单，点击后关闭
const mobileMenu = document.getElementById('mobile-menu');
if (!mobileMenu.classList.contains('invisible')) {
mobileMenu.classList.add('invisible', 'opacity-0', '-translate-y-full');
mobileMenu.classList.remove('opacity-100', 'translate-y-0');
const menuToggle = document.getElementById('menu-toggle');
menuToggle.innerHTML = '<i class="fa fa-bars text-2xl"></i>';
}
const targetId = this.getAttribute('href');
if (targetId === '#') return;
const targetElement = document.querySelector(targetId);
if (targetElement) {
window.scrollTo({
top: targetElement.offsetTop - 80,
behavior: 'smooth'
});
}
});
});
}
// 返回顶部按钮
function setupBackToTop() {
const backToTop = document.getElementById('back-to-top');
backToTop.addEventListener('click', () => {
window.scrollTo({
top: 0,
behavior: 'smooth'
});
});
}
// 访问统计
function setupVisitCounter() {
// 简单的访问统计实现，使用localStorage
const today = new Date().toISOString().split('T')[0];
let visits = JSON.parse(localStorage.getItem('visits')) || {};
// 今日访问
if (!visits[today]) {
visits[today] = 1;
} else {
visits[today]++;
}
// 总访问量
let totalVisits = 0;
for (const date in visits) {
totalVisits += visits[date];
}
// 更新DOM
document.getElementById('today-visits').textContent = visits[today];
document.getElementById('total-visits').textContent = totalVisits;
// 保存到localStorage
localStorage.setItem('visits', JSON.stringify(visits));
}
// 页面加载完成后初始化
window.addEventListener('load', () => {
createParticles();
checkFadeElements();
handleNavbarScroll();
setupMobileMenu();
setupSmoothScroll();
setupBackToTop();
setupVisitCounter();
});
// 滚动时检查动画元素和导航栏
window.addEventListener('scroll', () => {
checkFadeElements();
handleNavbarScroll();
});
</script>
</body>
</html>
[/hide]
本文标签： 主页 html单页
版权说明
提示：本作品是由 樊不烦博客 用户
博主 投递的作品。
欢迎转载，但请务必注明来源地址：
所有资源为用户上传分享，若发现您的权利被侵害，请联系QQ167471919，我们尽快处理。
文章采用： 《署名-非商业性使用-相同方式共享 4.0 国际 (CC BY-NC-SA 4.0)》许可协议授权。
欢迎转载，但请务必注明来源地址：
所有资源为用户上传分享，若发现您的权利被侵害，请联系QQ167471919，我们尽快处理。
文章采用： 《署名-非商业性使用-相同方式共享 4.0 国际 (CC BY-NC-SA 4.0)》许可协议授权。
