纯CSS3海边飞翔的小鸟动画特效-优快云博客

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

<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>纯CSS3海边飞翔的小鸟动画特效</title>
<style>
body {
margin: 0;
padding: 0;
height: 100vh;
overflow: hidden;
background: linear-gradient(to bottom, #87CEEB 0%, #1E90FF 100%);
font-family: Arial, sans-serif;
}

.beach {
position: absolute;
bottom: 0;
width: 100%;
height: 150px;
background: linear-gradient(to bottom, #F5DEB3 0%, #D2B48C 100%);
}

.wave {
position: absolute;
bottom: 150px;
width: 100%;
height: 20px;
background: url('data:image/svg+xml;utf8,<svg viewBox="0 0 1200 120" xmlns="http://www.w3.org/2000/svg"><path d="M0,0V46.29c47.79,22.2,103.59,32.17,158,28,70.36-5.37,136.33-33.31,206.8-37.5C438.64,32.43,512.34,53.67,583,72.05c69.27,18,138.3,24.88,209.4,13.08,36.15-6,69.85-17.84,104.45-29.34C989.49,25,1113-14.29,1200,52.47V0Z" opacity=".25" fill="%231E90FF"/><path d="M0,0V15.81C13,36.92,27.64,56.86,47.69,72.05,99.41,111.27,165,111,224.58,91.58c31.15-10.15,60.09-26.07,89.67-39.8,40.92-19,84.73-46,130.83-49.67,36.26-2.85,70.9,9.42,98.6,31.56,31.77,25.39,62.32,62,103.63,73,40.44,10.79,81.35-6.69,119.13-24.28s75.16-39,116.92-43.05c59.73-5.85,113.28,22.88,168.9,38.84,30.2,8.66,59,6.17,87.09-7.5,22.43-10.89,48-26.93,60.65-49.24V0Z" opacity=".5" fill="%231E90FF"/><path d="M0,0V5.63C149.93,59,314.09,71.32,475.83,42.57c43-7.64,84.23-20.12,127.61-26.46,59-8.63,112.48,12.24,165.56,35.4C827.93,77.22,886,95.24,951.2,90c86.53-7,172.46-45.71,248.8-84.81V0Z" fill="%231E90FF"/></svg>');
background-size: 1200px 120px;
animation: wave 15s linear infinite;
}

.wave:nth-child(2) {
bottom: 140px;
opacity: 0.5;
animation: wave 12s linear infinite reverse;
}

.wave:nth-child(3) {
bottom: 130px;
opacity: 0.3;
animation: wave 10s linear infinite;
}

@keyframes wave {
0% { background-position-x: 0; }
100% { background-position-x: 1200px; }
}

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

.bird-container {
position: absolute;
top: 50%;
left: -100px;
animation: fly 15s linear infinite;
}

.bird {
position: relative;
width: 60px;
height: 30px;
}

.bird-body {
position: absolute;
top: 0;
left: 0;
width: 30px;
height: 20px;
background-color: #FFF;
border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;
}

.bird-head {
position: absolute;
top: -5px;
left: 20px;
width: 15px;
height: 15px;
background-color: #FFF;
border-radius: 50%;
}

.bird-eye {
position: absolute;
top: 3px;
right: 3px;
width: 5px;
height: 5px;
background-color: #000;
border-radius: 50%;
}

.bird-beak {
position: absolute;
top: 8px;
right: -5px;
width: 10px;
height: 5px;
background-color: #FFA500;
clip-path: polygon(0 0, 100% 50%, 0 100%);
}

.bird-wing {
position: absolute;
top: 5px;
left: 5px;
width: 25px;
height: 15px;
background-color: #FFF;
border-radius: 50% 50% 0 0;
transform-origin: right center;
animation: flap 0.4s linear infinite;
}

.bird-wing:nth-child(6) {
top: 10px;
left: 0;
transform-origin: left center;
animation: flap 0.4s linear infinite reverse;
}

@keyframes flap {
0%, 100% { transform: rotate(0deg); }
50% { transform: rotate(30deg); }
}

@keyframes fly {
0% {
transform: translateX(-100px) translateY(-50px);
}
25% {
transform: translateX(25vw) translateY(-100px);
}
50% {
transform: translateX(50vw) translateY(-50px);
}
75% {
transform: translateX(75vw) translateY(-100px);
}
100% {
transform: translateX(100vw) translateY(-50px);
}
}

.cloud {
position: absolute;
background-color: rgba(255, 255, 255, 0.8);
border-radius: 50%;
animation: moveCloud linear infinite;
}

.cloud:nth-child(1) {
top: 100px;
left: 100px;
width: 60px;
height: 30px;
animation-duration: 30s;
}

.cloud:nth-child(2) {
top: 150px;
left: 300px;
width: 100px;
height: 50px;
animation-duration: 40s;
}

.cloud:nth-child(3) {
top: 80px;
left: 600px;
width: 80px;
height: 40px;
animation-duration: 35s;
}

.cloud:nth-child(4) {
top: 120px;
left: 900px;
width: 70px;
height: 35px;
animation-duration: 45s;
}

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

.credit {
position: absolute;
bottom: 10px;
right: 10px;
color: white;
font-size: 12px;
text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5);
}

.credit a {
color: white;
text-decoration: none;
}

.credit a:hover {
text-decoration: underline;
}
</style>
</head>
<body>
<div class="sun"></div>

<div class="cloud"></div>
<div class="cloud"></div>
<div class="cloud"></div>
<div class="cloud"></div>

<div class="bird-container">
<div class="bird">
<div class="bird-body"></div>
<div class="bird-head"></div>
<div class="bird-eye"></div>
<div class="bird-beak"></div>
<div class="bird-wing"></div>
<div class="bird-wing"></div>
</div>
</div>

<div class="wave"></div>
<div class="wave"></div>
<div class="wave"></div>

<div class="beach"></div>

<div class="credit">
动画特效由 <a href="http://fabu.88a.org.cn" target="_blank">fabu.88a.org.cn</a> 提供
</div>
</body>
</html>