<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>12个效果奇特的HTML5动画赏析</title>
<script src="https://cdn.tailwindcss.com"></script>
<link href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css" rel="stylesheet">
<script>
tailwind.config = {
theme: {
extend: {
colors: {
primary: '#3B82F6',
secondary: '#EC4899',
accent: '#8B5CF6',
dark: '#1E293B',
light: '#F8FAFC'
},
fontFamily: {
sans: ['Inter', 'system-ui', '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);
}
.animate-float {
animation: float 6s ease-in-out infinite;
}
.animate-pulse-slow {
animation: pulse 4s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}
.animate-spin-slow {
animation: spin 15s linear infinite;
}
.animate-spin-reverse {
animation: spin 20s linear infinite reverse;
}
.perspective {
perspective: 1000px;
}
.preserve-3d {
transform-style: preserve-3d;
}
}
@keyframes float {
0% { transform: translateY(0px); }
50% { transform: translateY(-20px); }
100% { transform: translateY(0px); }
}
</style>
</head>
<body class="bg-gray-50 font-sans text-dark">
<!-- 导航栏 -->
<nav id="navbar" class="fixed w-full z-50 transition-all duration-300 bg-white/90 backdrop-blur-md shadow-sm">
<div class="container mx-auto px-4 py-3 flex justify-between items-center">
<a href="#" class="text-2xl font-bold text-primary flex items-center">
<i class="fa fa-code mr-2"></i>
<span>HTML5动画赏析</span>
</a>
<div class="hidden md:flex space-x-8">
<a href="#intro" class="text-gray-700 hover:text-primary transition-colors">简介</a>
<a href="#animations" class="text-gray-700 hover:text-primary transition-colors">动画效果</a>
<a href="#about" class="text-gray-700 hover:text-primary transition-colors">关于</a>
</div>
<button class="md:hidden text-gray-700" id="menuToggle">
<i class="fa fa-bars text-xl"></i>
</button>
</div>
<!-- 移动端菜单 -->
<div id="mobileMenu" class="hidden md:hidden bg-white shadow-lg absolute w-full">
<div class="container mx-auto px-4 py-2 flex flex-col space-y-3">
<a href="#intro" class="text-gray-700 hover:text-primary py-2 transition-colors">简介</a>
<a href="#animations" class="text-gray-700 hover:text-primary py-2 transition-colors">动画效果</a>
<a href="#about" class="text-gray-700 hover:text-primary py-2 transition-colors">关于</a>
</div>
</div>
</nav>
<!-- 英雄区域 -->
<header class="relative h-screen flex items-center justify-center overflow-hidden">
<div class="absolute inset-0 z-0">
<div class="absolute inset-0 bg-gradient-to-r from-primary/90 to-accent/90 mix-blend-overlay"></div>
<canvas id="particlesCanvas" class="w-full h-full"></canvas>
</div>
<div class="container mx-auto px-4 z-10 text-center">
<h1 class="text-[clamp(2.5rem,8vw,5rem)] font-bold text-white mb-6 leading-tight text-shadow">
12个效果奇特的<br>HTML5动画赏析
</h1>
<p class="text-[clamp(1rem,3vw,1.5rem)] text-white/90 mb-10 max-w-3xl mx-auto">
探索HTML5、CSS3和JavaScript带来的视觉盛宴，感受现代Web动画的魅力
</p>
<a href="#animations" class="inline-block bg-white text-primary px-8 py-4 rounded-full font-semibold shadow-lg hover:shadow-xl transform hover:-translate-y-1 transition-all duration-300">
开始探索 <i class="fa fa-arrow-down ml-2"></i>
</a>
</div>
<div class="absolute bottom-10 left-1/2 transform -translate-x-1/2 animate-bounce">
<a href="#intro" class="text-white/80 hover:text-white">
<i class="fa fa-angle-down text-3xl"></i>
</a>
</div>
</header>
<!-- 简介部分 -->
<section id="intro" class="py-20 bg-white">
<div class="container mx-auto px-4">
<div class="max-w-3xl mx-auto text-center mb-16">
<h2 class="text-[clamp(1.5rem,3vw,2.5rem)] font-bold text-dark mb-6">
关于这些动画
</h2>
<p class="text-gray-600 text-lg leading-relaxed">
这里展示的12个动画效果，均使用纯HTML、CSS和JavaScript实现，无需任何第三方库。每个动画都展示了现代Web技术的强大能力和创意潜力。
</p>
<div class="mt-10 grid grid-cols-3 gap-6">
<div class="bg-gray-50 p-6 rounded-xl shadow-sm">
<div class="text-primary text-3xl mb-3">
<i class="fa fa-html5"></i>
</div>
<h3 class="font-semibold text-lg mb-2">HTML5</h3>
<p class="text-gray-600">使用最新的HTML5特性构建</p>
</div>
<div class="bg-gray-50 p-6 rounded-xl shadow-sm">
<div class="text-secondary text-3xl mb-3">
<i class="fa fa-css3"></i>
</div>
<h3 class="font-semibold text-lg mb-2">CSS3</h3>
<p class="text-gray-600">精美的CSS动画与过渡效果</p>
</div>
<div class="bg-gray-50 p-6 rounded-xl shadow-sm">
<div class="text-accent text-3xl mb-3">
<i class="fa fa-code"></i>
</div>
<h3 class="font-semibold text-lg mb-2">JavaScript</h3>
<p class="text-gray-600">强大的交互与动态效果</p>
</div>
</div>
</div>
</div>
</section>
<!-- 动画展示区域 -->
<section id="animations" class="py-20 bg-gray-50">
<div class="container mx-auto px-4">
<div class="text-center mb-16">
<h2 class="text-[clamp(1.5rem,3vw,2.5rem)] font-bold text-dark mb-6">
动画效果展示
</h2>
<p class="text-gray-600 text-lg max-w-3xl mx-auto">
点击下方卡片查看不同的动画效果，每个效果都有其独特的实现方式和视觉体验
</p>
</div>
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
<!-- 动画1：3D旋转立方体 -->
<div class="bg-white rounded-xl overflow-hidden shadow-lg hover:shadow-xl transition-shadow duration-300">
<div class="p-6">
<h3 class="font-bold text-xl mb-2">3D旋转立方体</h3>
<p class="text-gray-600 mb-4">使用CSS 3D变换创建的交互式立方体</p>
<div class="perspective h-64 w-full flex items-center justify-center">
<div id="cube-container" class="relative w-40 h-40 preserve-3d animate-spin-slow">
<div class="absolute w-40 h-40 bg-primary/80 flex items-center justify-center text-white font-bold">前面</div>
<div class="absolute w-40 h-40 bg-secondary/80 flex items-center justify-center text-white font-bold transform translate-z-[-80px]">后面</div>
<div class="absolute w-40 h-40 bg-accent/80 flex items-center justify-center text-white font-bold transform rotate-y-[90deg] translate-z-[-40px]">左面</div>
<div class="absolute w-40 h-40 bg-green-500/80 flex items-center justify-center text-white font-bold transform rotate-y-[90deg] translate-z-[40px]">右面</div>
<div class="absolute w-40 h-40 bg-yellow-500/80 flex items-center justify-center text-white font-bold transform rotate-x-[90deg] translate-z-[-40px]">顶面</div>
<div class="absolute w-40 h-40 bg-purple-500/80 flex items-center justify-center text-white font-bold transform rotate-x-[90deg] translate-z-[40px]">底面</div>
</div>
</div>
</div>
<div class="bg-gray-50 p-4 flex justify-between items-center">
<span class="text-gray-500 text-sm">CSS 3D变换</span>
</div>
</div>
<!-- 动画2：粒子背景 -->
<div class="bg-white rounded-xl overflow-hidden shadow-lg hover:shadow-xl transition-shadow duration-300">
<div class="p-6">
<h3 class="font-bold text-xl mb-2">粒子背景</h3>
<p class="text-gray-600 mb-4">随鼠标移动而互动的粒子背景效果</p>
<div class="h-64 w-full bg-dark rounded-lg overflow-hidden relative">
<canvas id="particleAnimation" class="w-full h-full"></canvas>
</div>
</div>
<div class="bg-gray-50 p-4 flex justify-between items-center">
<a href="#" class="text-primary hover:text-primary/80 font-medium flex items-center">
了解更多 <i class="fa fa-external-link ml-1"></i>
</a>
<span class="text-gray-500 text-sm">Canvas</span>
</div>
</div>
<!-- 动画3：波浪效果 -->
<div class="bg-white rounded-xl overflow-hidden shadow-lg hover:shadow-xl transition-shadow duration-300">
<div class="p-6">
<h3 class="font-bold text-xl mb-2">波浪效果</h3>
<p class="text-gray-600 mb-4">流体波浪动画，创造平静的视觉体验</p>
<div class="h-64 w-full bg-gradient-to-b from-blue-400 to-blue-800 rounded-lg overflow-hidden relative">
<div class="absolute bottom-0 left-0 w-full">
<svg viewBox="0 0 1440 320" class="w-full h-auto">
<path fill="#ffffff" fill-opacity="0.3" d="M0,224L60,213.3C120,203,240,181,360,181.3C480,181,600,203,720,213.3C840,224,960,224,1080,213.3C1200,203,1320,181,1380,170.7L1440,160L1440,320L1380,320C1320,320,1200,320,1080,320C960,320,840,320,720,320C600,320,480,320,360,320C240,320,120,320,60,320L0,320Z" class="animate-pulse-slow"></path>
<path fill="#ffffff" fill-opacity="0.5" d="M0,192L60,186.7C120,181,240,171,360,165.3C480,160,600,160,720,170.7C840,181,960,203,1080,208C1200,213,1320,203,1380,197.3L1440,192L1440,320L1380,320C1320,320,1200,320,1080,320C960,320,840,320,720,320C600,320,480,320,360,320C240,320,120,320,60,320L0,320Z" class="animate-pulse-slow" style="animation-delay: -1s;"></path>
<path fill="#ffffff" fill-opacity="0.7" d="M0,160L60,149.3C120,139,240,117,360,117.3C480,117,600,139,720,154.7C840,171,960,181,1080,170.7C1200,160,1320,128,1380,112L1440,96L1440,320L1380,320C1320,320,1200,320,1080,320C960,320,840,320,720,320C600,320,480,320,360,320C240,320,120,320,60,320L0,320Z" class="animate-pulse-slow" style="animation-delay: -2s;"></path>
</svg>
</div>
</div>
</div>
<div class="bg-gray-50 p-4 flex justify-between items-center">
<a href="#" class="text-primary hover:text-primary/80 font-medium flex items-center">
了解更多 <i class="fa fa-external-link ml-1"></i>
</a>
<span class="text-gray-500 text-sm">SVG动画</span>
</div>
</div>
<!-- 动画4：加载动画 -->
<div class="bg-white rounded-xl overflow-hidden shadow-lg hover:shadow-xl transition-shadow duration-300">
<div class="p-6">
<h3 class="font-bold text-xl mb-2">加载动画</h3>
<p class="text-gray-600 mb-4">创意加载动画效果集合</p>
<div class="h-64 w-full flex flex-wrap items-center justify-center gap-6">
<div class="w-12 h-12 border-4 border-primary border-t-transparent rounded-full animate-spin"></div>
<div class="flex space-x-2">
<div class="w-4 h-4 bg-secondary rounded-full animate-bounce"></div>
<div class="w-4 h-4 bg-secondary rounded-full animate-bounce" style="animation-delay: 0.2s;"></div>
<div class="w-4 h-4 bg-secondary rounded-full animate-bounce" style="animation-delay: 0.4s;"></div>
</div>
<div class="relative w-16 h-16">
<div class="absolute inset-0 border-4 border-accent border-t-transparent rounded-full animate-spin"></div>
<div class="absolute inset-2 border-4 border-green-500 border-t-transparent rounded-full animate-spin-reverse"></div>
</div>
</div>
</div>
<div class="bg-gray-50 p-4 flex justify-between items-center">
<a href="#" class="text-primary hover:text-primary/80 font-medium flex items-center">
了解更多 <i class="fa fa-external-link ml-1"></i>
</a>
<span class="text-gray-500 text-sm">CSS动画</span>
</div>
</div>
<!-- 动画5：交互波纹 -->
<div class="bg-white rounded-xl overflow-hidden shadow-lg hover:shadow-xl transition-shadow duration-300">
<div class="p-6">
<h3 class="font-bold text-xl mb-2">交互波纹</h3>
<p class="text-gray-600 mb-4">点击或移动鼠标时产生的波纹效果</p>
<div id="ripple-container" class="h-64 w-full bg-gradient-to-br from-indigo-500 to-purple-600 rounded-lg overflow-hidden relative cursor-pointer">
<div class="absolute inset-0 flex items-center justify-center">
<span class="text-white font-bold text-xl">点击此处</span>
</div>
</div>
</div>
<div class="bg-gray-50 p-4 flex justify-between items-center">
<a href="#" class="text-primary hover:text-primary/80 font-medium flex items-center">
了解更多 <i class="fa fa-external-link ml-1"></i>
</a>
<span class="text-gray-500 text-sm">JavaScript + CSS</span>
</div>
</div>
<!-- 动画6：悬浮卡片 -->
<div class="bg-white rounded-xl overflow-hidden shadow-lg hover:shadow-xl transition-shadow duration-300">
<div class="p-6">
<h3 class="font-bold text-xl mb-2">悬浮卡片</h3>
<p class="text-gray-600 mb-4">随鼠标移动产生视差效果的3D卡片</p>
<div id="parallax-card" class="h-64 w-full flex items-center justify-center">
<div class="w-64 h-40 bg-white rounded-xl shadow-xl overflow-hidden perspective relative animate-float">
<div class="absolute inset-0 bg-gradient-to-br from-primary to-accent"></div>
<div class="absolute inset-0 flex items-center justify-center">
<span class="text-white font-bold text-2xl transform hover:scale-110 transition-transform">3D效果</span>
</div>
</div>
</div>
</div>
<div class="bg-gray-50 p-4 flex justify-between items-center">
<a href="#" class="text-primary hover:text-primary/80 font-medium flex items-center">
了解更多 <i class="fa fa-external-link ml-1"></i>
</a>
<span class="text-gray-500 text-sm">CSS 3D变换</span>
</div>
</div>
<!-- 动画7：粒子文字 -->
<div class="bg-white rounded-xl overflow-hidden shadow-lg hover:shadow-xl transition-shadow duration-300">
<div class="p-6">
<h3 class="font-bold text-xl mb-2">粒子文字</h3>
<p class="text-gray-600 mb-4">由粒子组成的文字，随鼠标移动产生效果</p>
<div id="particle-text-container" class="h-64 w-full bg-dark rounded-lg overflow-hidden relative">
<canvas id="particleTextCanvas" class="w-full h-full"></canvas>
</div>
</div>
<div class="bg-gray-50 p-4 flex justify-between items-center">
<a href="#" class="text-primary hover:text-primary/80 font-medium flex items-center">
了解更多 <i class="fa fa-external-link ml-1"></i>
</a>
<span class="text-gray-500 text-sm">Canvas</span>
</div>
</div>
<!-- 动画8：流体效果 -->
<div class="bg-white rounded-xl overflow-hidden shadow-lg hover:shadow-xl transition-shadow duration-300">
<div class="p-6">
<h3 class="font-bold text-xl mb-2">流体效果</h3>
<p class="text-gray-600 mb-4">模拟液体流动的视觉效果</p>
<div class="h-64 w-full bg-dark rounded-lg overflow-hidden relative">
<canvas id="liquidCanvas" class="w-full h-full"></canvas>
</div>
</div>
<div class="bg-gray-50 p-4 flex justify-between items-center">
<a href="#" class="text-primary hover:text-primary/80 font-medium flex items-center">
了解更多 <i class="fa fa-external-link ml-1"></i>
</a>
<span class="text-gray-500 text-sm">Canvas</span>
</div>
</div>
<!-- 动画9：路径动画 -->
<div class="bg-white rounded-xl overflow-hidden shadow-lg hover:shadow-xl transition-shadow duration-300">
<div class="p-6">
<h3 class="font-bold text-xl mb-2">路径动画</h3>
<p class="text-gray-600 mb-4">沿SVG路径移动的动画元素</p>
<div class="h-64 w-full flex items-center justify-center">
<svg viewBox="0 0 400 200" class="w-full h-auto">
<path id="path" d="M50,100 C150,0 250,200 350,100" fill="none" stroke="#ccc" stroke-width="2"></path>
<circle id="circle" cx="50" cy="100" r="10" fill="primary">
<animateMotion dur="5s" repeatCount="indefinite">
<mpath href="#path"></mpath>
</animateMotion>
</circle>
<path id="complexPath" d="M50,150 C100,50 150,150 200,50 C250,150 300,50 350,150" fill="none" stroke="#ccc" stroke-width="2"></path>
<rect id="rect" x="50" y="145" width="10" height="10" fill="secondary">
<animateMotion dur="7s" repeatCount="indefinite">
<mpath href="#complexPath"></mpath>
</animateMotion>
</rect>
</svg>
</div>
</div>
<div class="bg-gray-50 p-4 flex justify-between items-center">
<a href="#" class="text-primary hover:text-primary/80 font-medium flex items-center">
了解更多 <i class="fa fa-external-link ml-1"></i>
</a>
<span class="text-gray-500 text-sm">SVG动画</span>
</div>
</div>
<!-- 动画10：弹性物理 -->
<div class="bg-white rounded-xl overflow-hidden shadow-lg hover:shadow-xl transition-shadow duration-300">
<div class="p-6">
<h3 class="font-bold text-xl mb-2">弹性物理</h3>
<p class="text-gray-600 mb-4">模拟弹性物理效果的动画</p>
<div id="physics-container" class="h-64 w-full bg-gray-100 rounded-lg overflow-hidden relative">
<div id="ball" class="absolute w-12 h-12 bg-primary rounded-full shadow-lg" style="top: 20px; left: 50%; transform: translateX(-50%);"></div>
</div>
</div>
<div class="bg-gray-50 p-4 flex justify-between items-center">
<a href="#" class="text-primary hover:text-primary/80 font-medium flex items-center">
了解更多 <i class="fa fa-external-link ml-1"></i>
</a>
<span class="text-gray-500 text-sm">JavaScript</span>
</div>
</div>
<!-- 动画11：图像融合 -->
<div class="bg-white rounded-xl overflow-hidden shadow-lg hover:shadow-xl transition-shadow duration-300">
<div class="p-6">
<h3 class="font-bold text-xl mb-2">图像融合</h3>
<p class="text-gray-600 mb-4">平滑过渡的图像融合效果</p>
<div class="h-64 w-full rounded-lg overflow-hidden relative">
<div class="absolute inset-0">
<img src="https://picsum.photos/id/1015/800/600" alt="自然风景" class="w-full h-full object-cover">
</div>
<div class="absolute inset-0 bg-gradient-to-r from-primary/80 to-transparent opacity-0 hover:opacity-100 transition-opacity duration-1000"></div>
</div>
</div>
<div class="bg-gray-50 p-4 flex justify-between items-center">
<a href="#" class="text-primary hover:text-primary/80 font-medium flex items-center">
了解更多 <i class="fa fa-external-link ml-1"></i>
</a>
<span class="text-gray-500 text-sm">CSS过渡</span>
</div>
</div>
<!-- 动画12：打字效果 -->
<div class="bg-white rounded-xl overflow-hidden shadow-lg hover:shadow-xl transition-shadow duration-300">
<div class="p-6">
<h3 class="font-bold text-xl mb-2">打字效果</h3>
<p class="text-gray-600 mb-4">模拟键盘输入的动画效果</p>
<div class="h-64 w-full bg-dark rounded-lg overflow-hidden relative flex items-center justify-center p-6">
<div id="typing-container" class="text-white font-mono text-lg">
<span id="typing-text"></span>
<span id="typing-cursor" class="inline-block bg-white w-1 h-6 animate-pulse"></span>
</div>
</div>
</div>
<div class="bg-gray-50 p-4 flex justify-between items-center">
<a href="#" class="text-primary hover:text-primary/80 font-medium flex items-center">
了解更多 <i class="fa fa-external-link ml-1"></i>
</a>
<span class="text-gray-500 text-sm">JavaScript</span>
</div>
</div>
</div>
</div>
</section>
<!-- 关于部分 -->
<section id="about" class="py-20 bg-white">
<div class="container mx-auto px-4">
<div class="max-w-3xl mx-auto text-center">
<h2 class="text-[clamp(1.5rem,3vw,2.5rem)] font-bold text-dark mb-6">
关于这个项目
</h2>
<p class="text-gray-600 text-lg leading-relaxed mb-10">
这个项目展示了12种不同的HTML5动画效果，每种效果都有其独特的实现方式和视觉体验。这些动画不依赖任何第三方库，完全使用原生HTML、CSS和JavaScript实现。
</p>
<div class="flex flex-wrap justify-center gap-6">
<a href="#" class="inline-flex items-center justify-center px-6 py-3 bg-primary text-white rounded-lg hover:bg-primary/90 transition-colors">
<i class="fa fa-github mr-2"></i> 查看源代码
</a>
<a href="#" class="inline-flex items-center justify-center px-6 py-3 bg-white text-primary border border-primary rounded-lg hover:bg-gray-50 transition-colors">
<i class="fa fa-envelope mr-2"></i> 联系我们
</a>
</div>
</div>
</div>
</section>
<!-- 页脚 -->
<footer class="bg-dark text-white py-12">
<div class="container mx-auto px-4">
<div class="grid grid-cols-1 md:grid-cols-3 gap-8">
<div>
<h3 class="text-xl font-bold mb-4">HTML5动画赏析</h3>
<p class="text-gray-400 mb-4">
探索HTML5、CSS3和JavaScript带来的视觉盛宴，感受现代Web动画的魅力。
</p>
<div class="flex space-x-4">
<a href="#" class="text-gray-400 hover:text-white transition-colors">
<i class="fa fa-facebook"></i>
</a>
<a href="#" class="text-gray-400 hover:text-white transition-colors">
<i class="fa fa-twitter"></i>
</a>
<a href="#" class="text-gray-400 hover:text-white transition-colors">
<i class="fa fa-instagram"></i>
</a>
<a href="#" class="text-gray-400 hover:text-white transition-colors">
<i class="fa fa-github"></i>
</a>
</div>
</div>
<div>
<h3 class="text-xl font-bold mb-4">快速链接</h3>
<ul class="space-y-2">
<li><a href="#intro" class="text-gray-400 hover:text-white transition-colors">简介</a></li>
<li><a href="#animations" class="text-gray-400 hover:text-white transition-colors">动画效果</a></li>
<li><a href="#about" class="text-gray-400 hover:text-white transition-colors">关于</a></li>
<li><a href="#" class="text-gray-400 hover:text-white transition-colors">隐私政策</a></li>
<li><a href="#" class="text-gray-400 hover:text-white transition-colors">使用条款</a></li>
</ul>
</div>
<div>
<h3 class="text-xl font-bold mb-4">联系我们</h3>
<ul class="space-y-2">
<li class="flex items-center">
<i class="fa fa-envelope-o mr-2 text-gray-400"></i>
<a href="mailto:info@example.com" class="text-gray-400 hover:text-white transition-colors">info@example.com</a>
</li>
<li class="flex items-center">
<i class="fa fa-phone mr-2 text-gray-400"></i>
<span class="text-gray-400">+1 (123) 456-7890</span>
</li>
<li class="flex items-center">
<i class="fa fa-map-marker mr-2 text-gray-400"></i>
<span class="text-gray-400">北京市朝阳区建国路88号</span>
</li>
</ul>
</div>
</div>
<div class="border-t border-gray-800 mt-10 pt-6 text-center text-gray-500">
<p>© 2025 HTML5动画赏析. 保留所有权利.</p>
</div>
</div>
</footer>
<script>
// 导航栏滚动效果
window.addEventListener('scroll', function() {
const navbar = document.getElementById('navbar');
if (window.scrollY > 100) {
navbar.classList.add('py-2', 'shadow-md');
navbar.classList.remove('py-3', 'shadow-sm');
} else {
navbar.classList.add('py-3', 'shadow-sm');
navbar.classList.remove('py-2', 'shadow-md');
}
});
// 移动端菜单切换
document.getElementById('menuToggle').addEventListener('click', function() {
const mobileMenu = document.getElementById('mobileMenu');
mobileMenu.classList.toggle('hidden');
});
// 平滑滚动
document.querySelectorAll('a[href^="#"]').forEach(anchor => {
anchor.addEventListener('click', function (e) {
e.preventDefault();
const targetId = this.getAttribute('href');
const targetElement = document.querySelector(targetId);
if (targetElement) {
window.scrollTo({
top: targetElement.offsetTop - 80,
behavior: 'smooth'
});
// 关闭移动菜单
document.getElementById('mobileMenu').classList.add('hidden');
}
});
});
// 粒子背景效果
window.addEventListener('load', function() {
// 英雄区粒子背景
const particlesCanvas = document.getElementById('particlesCanvas');
const particlesCtx = particlesCanvas.getContext('2d');
// 设置canvas尺寸
function resizeCanvas() {
particlesCanvas.width = window.innerWidth;
particlesCanvas.height = window.innerHeight;
}
resizeCanvas();
window.addEventListener('resize', resizeCanvas);
// 创建粒子
class Particle {
constructor() {
this.x = Math.random() * particlesCanvas.width;
this.y = Math.random() * particlesCanvas.height;
this.size = Math.random() * 3 + 1;
this.speedX = Math.random() * 3 - 1.5;
this.speedY = Math.random() * 3 - 1.5;
this.color = `rgba(${Math.random() * 255}, ${Math.random() * 255}, ${Math.random() * 255}, 0.8)`;
}
update() {
this.x += this.speedX;
this.y += this.speedY;
if (this.size > 0.2) this.size -= 0.01;
if (this.x < 0 || this.x > particlesCanvas.width) this.speedX *= -1;
if (this.y < 0 || this.y > particlesCanvas.height) this.speedY *= -1;
}
draw() {
particlesCtx.fillStyle = this.color;
particlesCtx.beginPath();
particlesCtx.arc(this.x, this.y, this.size, 0, Math.PI * 2);
particlesCtx.fill();
}
}
let particles = [];
const initParticles = () => {
particles = [];
for (let i = 0; i < 100; i++) {
particles.push(new Particle());
}
};
initParticles();
// 动画循环
function animateParticles() {
particlesCtx.clearRect(0, 0, particlesCanvas.width, particlesCanvas.height);
for (let i = 0; i < particles.length; i++) {
particles[i].update();
particles[i].draw();
// 绘制粒子间连线
for (let j = i; j < particles.length; j++) {
const dx = particles[i].x - particles[j].x;
const dy = particles[i].y - particles[j].y;
const distance = Math.sqrt(dx * dx + dy * dy);
if (distance < 100) {
particlesCtx.beginPath();
particlesCtx.strokeStyle = `rgba(255, 255, 255, ${0.1 - distance/1000})`;
particlesCtx.lineWidth = 0.5;
particlesCtx.moveTo(particles[i].x, particles[i].y);
particlesCtx.lineTo(particles[j].x, particles[j].y);
particlesCtx.stroke();
}
}
}
requestAnimationFrame(animateParticles);
}
animateParticles();
// 粒子动画效果
const particleAnimation = document.getElementById('particleAnimation');
const particleAnimationCtx = particleAnimation.getContext('2d');
function resizeParticleAnimation() {
particleAnimation.width = particleAnimation.offsetWidth;
particleAnimation.height = particleAnimation.offsetHeight;
}
resizeParticleAnimation();
window.addEventListener('resize', resizeParticleAnimation);
class AnimationParticle {
constructor() {
this.x = Math.random() * particleAnimation.width;
this.y = Math.random() * particleAnimation.height;
this.size = Math.random() * 5 + 1;
this.speedX = Math.random() * 3 - 1.5;
this.speedY = Math.random() * 3 - 1.5;
this.color = `rgba(${Math.floor(Math.random() * 255)}, ${Math.floor(Math.random() * 255)}, ${Math.floor(Math.random() * 255)}, 0.8)`;
}
update() {
this.x += this.speedX;
this.y += this.speedY;
if (this.size > 0.2) this.size -= 0.01;
if (this.x < 0 || this.x > particleAnimation.width) this.speedX *= -1;
if (this.y < 0 || this.y > particleAnimation.height) this.speedY *= -1;
}
draw() {
particleAnimationCtx.fillStyle = this.color;
particleAnimationCtx.beginPath();
particleAnimationCtx.arc(this.x, this.y, this.size, 0, Math.PI * 2);
particleAnimationCtx.fill();
}
}
let animationParticles = [];
const initAnimationParticles = () => {
animationParticles = [];
for (let i = 0; i < 50; i++) {
animationParticles.push(new AnimationParticle());
}
};
initAnimationParticles();
function animateAnimationParticles() {
particleAnimationCtx.clearRect(0, 0, particleAnimation.width, particleAnimation.height);
for (let i = 0; i < animationParticles.length; i++) {
animationParticles[i].update();
animationParticles[i].draw();
for (let j = i; j < animationParticles.length; j++) {
const dx = animationParticles[i].x - animationParticles[j].x;
const dy = animationParticles[i].y - animationParticles[j].y;
const distance = Math.sqrt(dx * dx + dy * dy);
if (distance < 100) {
particleAnimationCtx.beginPath();
particleAnimationCtx.strokeStyle = `rgba(255, 255, 255, ${0.2 - distance/1000})`;
particleAnimationCtx.lineWidth = 0.5;
particleAnimationCtx.moveTo(animationParticles[i].x, animationParticles[i].y);
particleAnimationCtx.lineTo(animationParticles[j].x, animationParticles[j].y);
particleAnimationCtx.stroke();
}
}
}
requestAnimationFrame(animateAnimationParticles);
}
animateAnimationParticles();
// 波纹效果
const rippleContainer = document.getElementById('ripple-container');
rippleContainer.addEventListener('mousemove', function(e) {
const rect = this.getBoundingClientRect();
const x = e.clientX - rect.left;
const y = e.clientY - rect.top;
createRipple(x, y);
});
rippleContainer.addEventListener('click', function(e) {
const rect = this.getBoundingClientRect();
const x = e.clientX - rect.left;
const y = e.clientY - rect.top;
createRipple(x, y, true);
});
function createRipple(x, y, isClick = false) {
const ripple = document.createElement('div');
const size = Math.random() * 50 + 50;
ripple.style.width = `${size}px`;
ripple.style.height = `${size}px`;
ripple.style.left = `${x - size/2}px`;
ripple.style.top = `${y - size/2}px`;
ripple.style.borderRadius = '50%';
ripple.style.position = 'absolute';
ripple.style.background = isClick ? 'rgba(255, 255, 255, 0.3)' : 'rgba(255, 255, 255, 0.1)';
ripple.style.transform = 'scale(0)';
ripple.style.opacity = '1';
ripple.style.transition = 'transform 0.5s ease-out, opacity 0.5s ease-out';
rippleContainer.appendChild(ripple);
setTimeout(() => {
ripple.style.transform = 'scale(2)';
ripple.style.opacity = '0';
setTimeout(() => {
ripple.remove();
}, 500);
}, 10);
}
// 3D卡片视差效果
const parallaxCard = document.getElementById('parallax-card');
const card = parallaxCard.querySelector('div');
parallaxCard.addEventListener('mousemove', e => {
const rect = parallaxCard.getBoundingClientRect();
const x = e.clientX - rect.left; // 鼠标在卡片上的X坐标
const y = e.clientY - rect.top; // 鼠标在卡片上的Y坐标
const xRotation = ((y - rect.height / 2) / rect.height) * 15; // Y轴旋转角度
const yRotation = ((rect.width / 2 - x) / rect.width) * 15; // X轴旋转角度
card.style.transform = `rotateX(${xRotation}deg) rotateY(${yRotation}deg) translateZ(30px)`;
});
parallaxCard.addEventListener('mouseout', () => {
card.style.transform = 'rotateX(0) rotateY(0) translateZ(0)';
});
// 粒子文字效果
const particleTextCanvas = document.getElementById('particleTextCanvas');
const particleTextCtx = particleTextCanvas.getContext('2d');
function resizeParticleTextCanvas() {
particleTextCanvas.width = particleTextCanvas.offsetWidth;
particleTextCanvas.height = particleTextCanvas.offsetHeight;
}
resizeParticleTextCanvas();
window.addEventListener('resize', resizeParticleTextCanvas);
let particleText = 'HTML5';
let textParticles = [];
// 初始化粒子文字
function initTextParticles() {
textParticles = [];
particleTextCtx.clearRect(0, 0, particleTextCanvas.width, particleTextCanvas.height);
// 设置字体样式
particleTextCtx.font = 'bold 80px Arial';
particleTextCtx.fillStyle = 'white';
particleTextCtx.textAlign = 'center';
particleTextCtx.textBaseline = 'middle';
particleTextCtx.fillText(particleText, particleTextCanvas.width / 2, particleTextCanvas.height / 2);
const textData = particleTextCtx.getImageData(0, 0, particleTextCanvas.width, particleTextCanvas.height);
particleTextCtx.clearRect(0, 0, particleTextCanvas.width, particleTextCanvas.height);
// 创建粒子
for (let y = 0; y < particleTextCanvas.height; y += 4) {
for (let x = 0; x < particleTextCanvas.width; x += 4) {
const index = (y * particleTextCanvas.width + x) * 4;
if (textData.data[index + 3] > 128) { // 如果该像素是不透明的
const particle = {
x: x,
y: y,
targetX: x,
targetY: y,
size: Math.random() * 1.5 + 0.5,
speedX: (Math.random() - 0.5) * 5,
speedY: (Math.random() - 0.5) * 5,
color: `rgb(${Math.floor(Math.random() * 200 + 55)}, ${Math.floor(Math.random() * 200 + 55)}, ${Math.floor(Math.random() * 200 + 55)})`
};
textParticles.push(particle);
}
}
}
}
// 鼠标交互
particleTextCanvas.addEventListener('mousemove', function(e) {
const rect = particleTextCanvas.getBoundingClientRect();
const mouseX = e.clientX - rect.left;
const mouseY = e.clientY - rect.top;
textParticles.forEach(particle => {
const dx = mouseX - particle.x;
const dy = mouseY - particle.y;
const distance = Math.sqrt(dx * dx + dy * dy);
if (distance < 100) {
particle.speedX += (dx / distance) * 2;
particle.speedY += (dy / distance) * 2;
}
});
});
initTextParticles();
// 动画循环
function animateTextParticles() {
particleTextCtx.clearRect(0, 0, particleTextCanvas.width, particleTextCanvas.height);
textParticles.forEach(particle => {
// 回到目标位置
particle.speedX += (particle.targetX - particle.x) * 0.01;
particle.speedY += (particle.targetY - particle.y) * 0.01;
// 减速
particle.speedX *= 0.95;
particle.speedY *= 0.95;
// 更新位置
particle.x += particle.speedX;
particle.y += particle.speedY;
// 绘制粒子
particleTextCtx.fillStyle = particle.color;
particleTextCtx.beginPath();
particleTextCtx.arc(particle.x, particle.y, particle.size, 0, Math.PI * 2);
particleTextCtx.fill();
});
requestAnimationFrame(animateTextParticles);
}
animateTextParticles();
// 流体效果
const liquidCanvas = document.getElementById('liquidCanvas');
const liquidCtx = liquidCanvas.getContext('2d');
function resizeLiquidCanvas() {
liquidCanvas.width = liquidCanvas.offsetWidth;
liquidCanvas.height = liquidCanvas.offsetHeight;
}
resizeLiquidCanvas();
window.addEventListener('resize', resizeLiquidCanvas);
class LiquidParticle {
constructor() {
this.x = Math.random() * liquidCanvas.width;
this.y = Math.random() * liquidCanvas.height;
this.size = Math.random() * 3 + 1;
this.speedX = (Math.random() - 0.5) * 0.5;
this.speedY = (Math.random() - 0.5) * 0.5;
this.color = `rgba(${Math.floor(Math.random() * 100 + 155)}, ${Math.floor(Math.random() * 100 + 155)}, ${Math.floor(Math.random() * 200 + 55)}, 0.5)`;
this.angle = Math.random() * Math.PI * 2;
this.angleSpeed = (Math.random() - 0.5) * 0.01;
this.distance = Math.random() * 50 + 50;
}
update() {
this.angle += this.angleSpeed;
this.speedX = Math.cos(this.angle) * 0.5;
this.speedY = Math.sin(this.angle) * 0.5;
this.x += this.speedX;
this.y += this.speedY;
// 边界检测
if (this.x < 0) this.x = liquidCanvas.width;
if (this.x > liquidCanvas.width) this.x = 0;
if (this.y < 0) this.y = liquidCanvas.height;
if (this.y > liquidCanvas.height) this.y = 0;
}
draw() {
liquidCtx.fillStyle = this.color;
liquidCtx.beginPath();
liquidCtx.arc(this.x, this.y, this.size, 0, Math.PI * 2);
liquidCtx.fill();
}
}
let liquidParticles = [];
const initLiquidParticles = () => {
liquidParticles = [];
for (let i = 0; i < 100; i++) {
liquidParticles.push(new LiquidParticle());
}
};
initLiquidParticles();
function animateLiquidParticles() {
liquidCtx.clearRect(0, 0, liquidCanvas.width, liquidCanvas.height);
liquidParticles.forEach(particle => {
particle.update();
particle.draw();
});
// 绘制连接线
for (let i = 0; i < liquidParticles.length; i++) {
for (let j = i; j < liquidParticles.length; j++) {
const dx = liquidParticles[i].x - liquidParticles[j].x;
const dy = liquidParticles[i].y - liquidParticles[j].y;
const distance = Math.sqrt(dx * dx + dy * dy);
if (distance < 50) {
liquidCtx.beginPath();
liquidCtx.strokeStyle = `rgba(255, 255, 255, ${0.2 - distance/250})`;
liquidCtx.lineWidth = 0.5;
liquidCtx.moveTo(liquidParticles[i].x, liquidParticles[i].y);
liquidCtx.lineTo(liquidParticles[j].x, liquidParticles[j].y);
liquidCtx.stroke();
}
}
}
requestAnimationFrame(animateLiquidParticles);
}
animateLiquidParticles();
// 物理弹性效果
const physicsContainer = document.getElementById('physics-container');
const ball = document.getElementById('ball');
let ballPosition = { x: physicsContainer.offsetWidth / 2 - 24, y: 20 };
let ballVelocity = { x: 0, y: 0 };
let gravity = 0.5;
let bounceFactor = 0.8;
function updateBallPosition() {
// 应用重力
ballVelocity.y += gravity;
// 更新位置
ballPosition.y += ballVelocity.y;
// 检测碰撞
if (ballPosition.y + 48 > physicsContainer.offsetHeight) {
ballPosition.y = physicsContainer.offsetHeight - 48;
ballVelocity.y = -ballVelocity.y * bounceFactor;
// 增加随机性
ballVelocity.x = (Math.random() - 0.5) * 6;
}
// 左右边界
// 左右边界
if (ballPosition.x < 0) {
ballPosition.x = 0;
ballVelocity.x = -ballVelocity.x * bounceFactor;
} else if (ballPosition.x + 48 > physicsContainer.offsetWidth) {
ballPosition.x = physicsContainer.offsetWidth - 48;
ballVelocity.x = -ballVelocity.x * bounceFactor;
}
// 应用摩擦力
ballVelocity.x *= 0.98;
// 更新DOM
ball.style.left = `${ballPosition.x}px`;
ball.style.top = `${ballPosition.y}px`;
requestAnimationFrame(updateBallPosition);
}
updateBallPosition();
// 点击重置
physicsContainer.addEventListener('click', function() {
ballPosition = { x: physicsContainer.offsetWidth / 2 - 24, y: 20 };
ballVelocity = { x: 0, y: 0 };
});
// 打字效果
const typingText = document.getElementById('typing-text');
const textToType = "探索HTML5动画的奇妙世界，感受代码创造的视觉盛宴。";
let index = 0;
function typeWriter() {
if (index < textToType.length) {
typingText.innerHTML += textToType.charAt(index);
index++;
setTimeout(typeWriter, 100);
} else {
// 完成后等待一段时间再删除
setTimeout(deleteText, 2000);
}
}
function deleteText() {
if (index > 0) {
typingText.innerHTML = textToType.substring(0, index - 1);
index--;
setTimeout(deleteText, 50);
} else {
// 删除完成后重新开始
setTimeout(typeWriter, 500);
}
}
// 开始打字
typeWriter();
});
</script>
</body>
</html>
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
