HTML5动画场景

原创已于 2025-06-27 13:36:01 修改 · 353 阅读

CC 4.0 BY-SA版权

文章标签：

于 2025-06-04 14:32:06 首次发布

<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>HTML5动画场景</title>
<style>
body {
margin: 0;
overflow: hidden;
background: linear-gradient(to bottom, #1e5799 0%,#2989d8 50%,#207cca 51%,#7db9e8 100%);
font-family: 'Arial', sans-serif;
}

#scene {
position: relative;
width: 100vw;
height: 100vh;
overflow: hidden;
}

.sun {
position: absolute;
width: 100px;
height: 100px;
background: radial-gradient(circle at 30% 30%, #fff, #ffde00);
border-radius: 50%;
top: 50px;
left: 50%;
transform: translateX(-50%);
box-shadow: 0 0 50px #ffde00;
animation: sunGlow 4s infinite alternate;
}

.cloud {
position: absolute;
background: white;
border-radius: 50%;
opacity: 0.8;
filter: blur(5px);
}

.ground {
position: absolute;
bottom: 0;
width: 100%;
height: 30%;
background: linear-gradient(to bottom, #5d9634, #538c2b);
}

.tree {
position: absolute;
bottom: 30%;
}

.trunk {
width: 20px;
height: 60px;
background: linear-gradient(to right, #8B4513, #A0522D, #8B4513);
margin: 0 auto;
}

.leaves {
width: 80px;
height: 100px;
background: radial-gradient(ellipse at center, #5d9634 0%,#2d5a20 100%);
border-radius: 50%;
margin-left: -30px;
margin-bottom: 10px;
}

.bird {
position: absolute;
color: #000;
font-size: 24px;
animation: fly 15s linear infinite;
}

.link {
position: absolute;
bottom: 20px;
right: 20px;
color: white;
text-decoration: none;
font-size: 14px;
background: rgba(0,0,0,0.5);
padding: 8px 15px;
border-radius: 20px;
transition: all 0.3s;
}

.link:hover {
background: rgba(0,0,0,0.8);
transform: scale(1.05);
}

@keyframes sunGlow {
0% { box-shadow: 0 0 50px #ffde00; }
100% { box-shadow: 0 0 100px #ffde00; }
}

@keyframes cloudMove {
0% { transform: translateX(-100px); }
100% { transform: translateX(calc(100vw + 100px)); }
}

@keyframes fly {
0% { transform: translateX(-50px) translateY(50px) scaleX(1); }
50% { transform: translateX(calc(50vw - 25px)) translateY(20px) scaleX(1); }
51% { transform: translateX(calc(50vw - 25px)) translateY(20px) scaleX(-1); }
100% { transform: translateX(calc(100vw + 50px)) translateY(80px) scaleX(-1); }
}

@keyframes sway {
0%, 100% { transform: rotate(-2deg); }
50% { transform: rotate(2deg); }
}
</style>
</head>
<body>
<div id="scene">
<div class="sun"></div>


<div class="cloud" style="width: 100px; height: 60px; top: 80px; left: 20%; animation: cloudMove 30s linear infinite;"></div>
<div class="cloud" style="width: 150px; height: 80px; top: 120px; left: 40%; animation: cloudMove 40s linear infinite 5s;"></div>
<div class="cloud" style="width: 120px; height: 70px; top: 60px; left: 70%; animation: cloudMove 35s linear infinite 10s;"></div>


<div class="ground"></div>


<div class="tree" style="left: 10%; animation: sway 5s ease-in-out infinite;">
<div class="leaves"></div>
<div class="trunk"></div>
</div>
<div class="tree" style="left: 30%; animation: sway 4s ease-in-out infinite 1s;">
<div class="leaves"></div>
<div class="trunk"></div>
</div>
<div class="tree" style="left: 50%; animation: sway 6s ease-in-out infinite 2s;">
<div class="leaves" style="width: 100px; height: 120px;"></div>
<div class="trunk" style="height: 80px;"></div>
</div>
<div class="tree" style="left: 70%; animation: sway 5.5s ease-in-out infinite 0.5s;">
<div class="leaves"></div>
<div class="trunk"></div>
</div>
<div class="tree" style="left: 90%; animation: sway 4.5s ease-in-out infinite 1.5s;">
<div class="leaves"></div>
<div class="trunk"></div>
</div>


<div class="bird" style="top: 100px;">🐦</div>
<div class="bird" style="top: 150px; animation-delay: 3s;">🐦</div>


</div>