小鸟飞翔动画

ziblog

已于 2025-06-28 10:17:50 修改

阅读量386

点赞数 5

CC 4.0 BY-SA版权

文章标签： css 前端

于 2025-06-27 16:42:34 首次发布

本文链接：https://blog.youkuaiyun.com/zichenblog/article/details/148956286

<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>小鸟飞翔动画</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<style>
body {
margin: 0;
padding: 0;
height: 100vh;
overflow: hidden;
background: linear-gradient(to bottom, #87CEEB, #E0F7FA);
font-family: Arial, sans-serif;
}

.sky {
position: relative;
width: 100%;
height: 100%;
}

.bird {
position: absolute;
width: 60px;
height: 40px;
background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 60 40"><path d="M10,20 Q15,10 20,20 Q25,30 30,20 Q35,10 40,20 Q45,30 50,20" stroke="%23333" stroke-width="2" fill="none"/><path d="M20,15 Q25,5 30,15" stroke="%23333" stroke-width="2" fill="none"/></svg>');
background-repeat: no-repeat;
z-index: 10;
animation: fly 15s linear infinite;
}

.bird:nth-child(1) {
top: 20%;
left: -100px;
animation-delay: 0s;
transform: scale(0.8);
}

.bird:nth-child(2) {
top: 30%;
left: -100px;
animation-delay: 2s;
transform: scale(1);
}

.bird:nth-child(3) {
top: 40%;
left: -100px;
animation-delay: 4s;
transform: scale(0.7);
}

.bird:nth-child(4) {
top: 25%;
left: -100px;
animation-delay: 6s;
transform: scale(0.9);
}

.bird:nth-child(5) {
top: 35%;
left: -100px;
animation-delay: 8s;
transform: scale(1.1);
}

.cloud {
position: absolute;
background-color: white;
border-radius: 50%;
opacity: 0.8;
}

.cloud1 {
width: 100px;
height: 60px;
top: 15%;
left: 10%;
animation: drift 30s linear infinite;
}

.cloud2 {
width: 150px;
height: 90px;
top: 25%;
left: 40%;
animation: drift 40s linear infinite reverse;
}

.cloud3 {
width: 80px;
height: 50px;
top: 10%;
left: 70%;
animation: drift 35s linear infinite;
}

.sun {
position: absolute;
width: 80px;
height: 80px;
background: radial-gradient(circle, #FFD700, #FFA500);
border-radius: 50%;
top: 10%;
right: 10%;
box-shadow: 0 0 50px #FFD700;
}

.ground {
position: absolute;
bottom: 0;
width: 100%;
height: 30%;
background: linear-gradient(to bottom, #8BC34A, #4CAF50);
}

.tree {
position: absolute;
bottom: 30%;
width: 40px;
height: 100px;
background: linear-gradient(to right, #8D6E63, #5D4037);
border-radius: 5px;
}

.tree:before {
content: '';
position: absolute;
bottom: 100%;
left: 50%;
transform: translateX(-50%);
width: 0;
height: 0;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
border-bottom: 100px solid #2E7D32;
}

.tree1 {
left: 15%;
}

.tree2 {
left: 30%;
height: 120px;
}

.tree3 {
left: 60%;
height: 80px;
}

.tree4 {
left: 75%;
height: 110px;
}

@keyframes fly {
0% {
transform: translateX(-100px) translateY(0) scale(var(--scale));
}
50% {
transform: translateX(calc(50vw - 30px)) translateY(-20px) scale(var(--scale));
}
100% {
transform: translateX(calc(100vw + 100px)) translateY(0) scale(var(--scale));
}
}

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

.title {
position: absolute;
top: 10%;
left: 50%;
transform: translateX(-50%);
color: white;
text-shadow: 2px 2px 4px rgba(0,0,0,0.5);
font-size: 2em;
text-align: center;
}
</style>
</head>
<body>
<div class="sky">
<div class="title">自由飞翔的小鸟</div>
<div class="sun"></div>
<div class="cloud cloud1"></div>
<div class="cloud cloud2"></div>
<div class="cloud cloud3"></div>

<div class="bird" style="--scale: 0.8;"></div>
<div class="bird" style="--scale: 1.0;"></div>
<div class="bird" style="--scale: 0.7;"></div>
<div class="bird" style="--scale: 0.9;"></div>
<div class="bird" style="--scale: 1.1;"></div>

<div class="ground">
<div class="tree tree1"></div>
<div class="tree tree2"></div>
<div class="tree tree3"></div>
<div class="tree tree4"></div>
</div>
</div>