大白动画素材下载 - 网页动画特效_大白资源库-优快云博客

<!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;
font-family: 'Arial', sans-serif;
}

body {
background-color: #f5f5f5;
color: #333;
line-height: 1.6;
}

header {
background-color: #00a0e9;
color: white;
padding: 2rem 0;
text-align: center;
position: relative;
overflow: hidden;
}

.header-content {
position: relative;
z-index: 2;
}

h1 {
font-size: 2.5rem;
margin-bottom: 1rem;
animation: fadeInDown 1s ease;
}

.subtitle {
font-size: 1.2rem;
opacity: 0.9;
animation: fadeIn 1.5s ease;
}

.baymax {
position: absolute;
width: 150px;
height: 150px;
background-color: white;
border-radius: 50%;
top: 50%;
left: 20%;
transform: translateY(-50%);
animation: float 3s ease-in-out infinite;
}

.baymax:before, .baymax:after {
content: '';
position: absolute;
background-color: white;
border-radius: 50%;
}

.baymax:before {
width: 40px;
height: 40px;
top: 30px;
left: 20px;
box-shadow:
60px 0 0 0 white,
30px 50px 0 -10px white,
60px 50px 0 -10px white;
}

.baymax:after {
width: 60px;
height: 15px;
bottom: 30px;
left: 45px;
border-radius: 10px;
}

.container {
max-width: 1200px;
margin: 2rem auto;
padding: 0 20px;
}

.intro {
text-align: center;
margin-bottom: 3rem;
animation: fadeIn 1s ease;
}

.download-section {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
gap: 2rem;
margin-bottom: 3rem;
}

.download-card {
background: white;
border-radius: 10px;
padding: 1.5rem;
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
transition: transform 0.3s ease, box-shadow 0.3s ease;
animation: fadeInUp 0.5s ease;
}

.download-card:hover {
transform: translateY(-5px);
box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15);
}

.download-card h3 {
color: #00a0e9;
margin-bottom: 1rem;
font-size: 1.3rem;
}

.download-card p {
margin-bottom: 1.5rem;
color: #666;
}

.btn {
display: inline-block;
background-color: #00a0e9;
color: white;
padding: 0.6rem 1.2rem;
border-radius: 5px;
text-decoration: none;
font-weight: bold;
transition: background-color 0.3s ease;
}

.btn:hover {
background-color: #0088c7;
}

.animation-demo {
background: white;
border-radius: 10px;
padding: 2rem;
margin-bottom: 3rem;
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
text-align: center;
}

.demo-title {
margin-bottom: 1.5rem;
color: #00a0e9;
}

.animated-box {
width: 100px;
height: 100px;
background-color: #00a0e9;
margin: 0 auto;
border-radius: 10px;
animation: pulse 2s infinite;
}

footer {
background-color: #333;
color: white;
text-align: center;
padding: 2rem 0;
margin-top: 3rem;
}

.footer-link {
color: #00a0e9;
text-decoration: none;
}

/* Animations */
@keyframes fadeIn {
from { opacity: 0; }
to { opacity: 1; }
}

@keyframes fadeInDown {
from {
opacity: 0;
transform: translateY(-20px);
}
to {
opacity: 1;
transform: translateY(0);
}
}

@keyframes fadeInUp {
from {
opacity: 0;
transform: translateY(20px);
}
to {
opacity: 1;
transform: translateY(0);
}
}

@keyframes float {
0%, 100% {
transform: translateY(-50%) translateX(0);
}
50% {
transform: translateY(-50%) translateX(10px);
}
}

@keyframes pulse {
0% {
transform: scale(1);
box-shadow: 0 0 0 0 rgba(0, 160, 233, 0.7);
}
70% {
transform: scale(1.05);
box-shadow: 0 0 0 10px rgba(0, 160, 233, 0);
}
100% {
transform: scale(1);
box-shadow: 0 0 0 0 rgba(0, 160, 233, 0);
}
}

/* Responsive */
@media (max-width: 768px) {
.baymax {
display: none;
}

h1 {
font-size: 2rem;
}
}
</style>
</head>
<body>
<header>
<div class="baymax"></div>
<div class="header-content">
<h1>大白动画素材下载</h1>
<p class="subtitle">高品质网页动画特效资源库</p>
</div>
</header>

<div class="container">
<section class="intro">
<h2>欢迎来到大白动画素材库</h2>
<p>我们提供各种高质量的网页动画素材和特效代码，帮助您轻松创建引人注目的网页效果。</p>
<p>所有素材均可免费下载使用，支持HTML5、CSS3和JavaScript动画。</p>
</section>

<section class="download-section">
<div class="download-card" style="animation-delay: 0.1s">
<h3>大白CSS动画</h3>
<p>纯CSS实现的大白角色动画，包含行走、眨眼和挥手等多种动作。</p>
<a href="#" class="btn">立即下载</a>
</div>

<div class="download-card" style="animation-delay: 0.2s">
<h3>SVG动画特效</h3>
<p>20+种SVG路径动画和变形效果，适用于现代浏览器。</p>
<a href="#" class="btn">立即下载</a>
</div>

<div class="download-card" style="animation-delay: 0.3s">
<h3>JavaScript动画库</h3>
<p>轻量级JS动画库，包含缓动函数和复杂动画序列。</p>
<a href="#" class="btn">立即下载</a>
</div>

<div class="download-card" style="animation-delay: 0.4s">
<h3>加载动画合集</h3>
<p>50+种创意加载动画，CSS和JavaScript版本。</p>
<a href="#" class="btn">立即下载</a>
</div>

<div class="download-card" style="animation-delay: 0.5s">
<h3>滚动动画特效</h3>
<p>视差滚动、元素淡入等滚动触发动画效果。</p>
<a href="#" class="btn">立即下载</a>
</div>

<div class="download-card" style="animation-delay: 0.6s">
<h3>3D变换动画</h3>
<p>CSS3 3D变换和动画效果，创建立体视觉体验。</p>
<a href="#" class="btn">立即下载</a>
</div>
</section>

<section class="animation-demo">
<h3 class="demo-title">动画效果演示</h3>
<div class="animated-box"></div>
<p style="margin-top: 1.5rem;">这只是我们众多动画效果中的一个简单示例，下载完整素材包获取更多精彩特效！</p>

</section>
</div>

<footer>
<p>© 2023 大白动画素材库 | 所有素材仅供学习使用</p>

</footer>

<script>
// 简单的动画交互效果
document.addEventListener('DOMContentLoaded', function() {
// 卡片延迟显示
const cards = document.querySelectorAll('.download-card');
cards.forEach((card, index) => {
card.style.animationDelay = `${index * 0.1}s`;
});

// 点击按钮效果
const buttons = document.querySelectorAll('.btn');
buttons.forEach(button => {
button.addEventListener('click', function(e) {
if (!this.getAttribute('href') || this.getAttribute('href') === '#') {
e.preventDefault();
alert('感谢您的关注！这是一个演示页面，实际下载功能需要后端支持。');
}
});
});

// 滚动动画
window.addEventListener('scroll', function() {
const scrollPosition = window.scrollY;
const baymax = document.querySelector('.baymax');
if (baymax) {
baymax.style.transform = `translateY(-50%) translateX(${scrollPosition * 0.2}px)`;
}
});
});
</script>
</body>
</html>