<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>大海蓝天大雁飞过动画场景</title>
<style>
body {
margin: 0;
overflow: hidden;
background-color: #87CEEB;
}
.container {
position: relative;
width: 100vw;
height: 100vh;
}
.credit {
position: absolute;
bottom: 10px;
right: 10px;
color: white;
font-family: Arial, sans-serif;
font-size: 12px;
z-index: 100;
}
.credit a {
color: white;
text-decoration: none;
}
</style>
</head>
<body>
<div class="container">
<svg width="100%" height="100%" viewBox="0 0 1200 600" preserveAspectRatio="xMidYMid meet">
<!-- 蓝天渐变背景 -->
<defs>
<linearGradient id="skyGradient" x1="0%" y1="0%" x2="0%" y2="100%">
<stop offset="0%" style="stop-color:#87CEEB;stop-opacity:1" />
<stop offset="100%" style="stop-color:#1E90FF;stop-opacity:1" />
</linearGradient>
<linearGradient id="seaGradient" x1="0%" y1="0%" x2="0%" y2="100%">
<stop offset="0%" style="stop-color:#1E90FF;stop-opacity:1" />
<stop offset="100%" style="stop-color:#00008B;stop-opacity:1" />
</linearGradient>
</defs>
<!-- 蓝天 -->
<rect width="100%" height="70%" fill="url(#skyGradient)" />
<!-- 大海 -->
<rect y="70%" width="100%" height="30%" fill="url(#seaGradient)" />
<!-- 太阳 -->
<circle cx="150" cy="150" r="60" fill="#FFD700" />
<!-- 波浪动画 -->
<path id="wave" d="M0,420 Q150,400 300,420 T600,420 T900,420 T1200,420 L1200,600 L0,600 Z" fill="#1E90FF">
<animate attributeName="d"
values="M0,420 Q150,400 300,420 T600,420 T900,420 T1200,420 L1200,600 L0,600 Z;
M0,420 Q150,440 300,420 T600,420 T900,420 T1200,420 L1200,600 L0,600 Z;
M0,420 Q150,400 300,420 T600,420 T900,420 T1200,420 L1200,600 L0,600 Z"
dur="5s"
repeatCount="indefinite" />
</path>
<!-- 云朵1 -->
<g transform="translate(200,100)">
<circle cx="0" cy="0" r="20" fill="white" />
<circle cx="20" cy="-10" r="25" fill="white" />
<circle cx="45" cy="0" r="20" fill="white" />
<circle cx="25" cy="10" r="15" fill="white" />
<animateTransform attributeName="transform" type="translate" from="200,100" to="1200,100" dur="60s" repeatCount="indefinite" />
</g>
<!-- 云朵2 -->
<g transform="translate(600,150)">
<circle cx="0" cy="0" r="25" fill="white" />
<circle cx="25" cy="-15" r="30" fill="white" />
<circle cx="55" cy="0" r="25" fill="white" />
<circle cx="30" cy="15" r="20" fill="white" />
<animateTransform attributeName="transform" type="translate" from="600,150" to="1400,150" dur="80s" repeatCount="indefinite" />
</g>
<!-- 大雁群1 -->
<g class="bird-group" transform="translate(-100,150)">
<!-- 大雁V形编队 -->
<path d="M0,0 L10,5 M0,0 L10,-5" stroke="black" stroke-width="2" fill="none" />
<path d="M20,5 L30,10 M20,5 L30,0" stroke="black" stroke-width="2" fill="none" />
<path d="M20,-5 L30,0 M20,-5 L30,-10" stroke="black" stroke-width="2" fill="none" />
<path d="M40,10 L50,15 M40,10 L50,5" stroke="black" stroke-width="2" fill="none" />
<path d="M40,-10 L50,-5 M40,-10 L50,-15" stroke="black" stroke-width="2" fill="none" />
<!-- 翅膀扇动动画 -->
<animateTransform attributeName="transform" type="translate" values="-100,150; 1300,150" dur="30s" repeatCount="indefinite" />
<animateTransform attributeName="transform" type="translate" additive="sum" values="0,0; 0,-5; 0,0; 0,5; 0,0" dur="2s" repeatCount="indefinite" />
</g>
<!-- 大雁群2 -->
<g class="bird-group" transform="translate(-200,200)">
<!-- 大雁V形编队 -->
<path d="M0,0 L10,5 M0,0 L10,-5" stroke="black" stroke-width="2" fill="none" />
<path d="M20,5 L30,10 M20,5 L30,0" stroke="black" stroke-width="2" fill="none" />
<path d="M20,-5 L30,0 M20,-5 L30,-10" stroke="black" stroke-width="2" fill="none" />
<path d="M40,10 L50,15 M40,10 L50,5" stroke="black" stroke-width="2" fill="none" />
<path d="M40,-10 L50,-5 M40,-10 L50,-15" stroke="black" stroke-width="2" fill="none" />
<!-- 翅膀扇动动画 -->
<animateTransform attributeName="transform" type="translate" values="-200,200; 1300,200" dur="40s" repeatCount="indefinite" begin="5s" />
<animateTransform attributeName="transform" type="translate" additive="sum" values="0,0; 0,-5; 0,0; 0,5; 0,0" dur="2.5s" repeatCount="indefinite" begin="5s" />
</g>
<!-- 大雁群3 -->
<g class="bird-group" transform="translate(-300,100)">
<!-- 大雁V形编队 -->
<path d="M0,0 L10,5 M0,0 L10,-5" stroke="black" stroke-width="2" fill="none" />
<path d="M20,5 L30,10 M20,5 L30,0" stroke="black" stroke-width="2" fill="none" />
<path d="M20,-5 L30,0 M20,-5 L30,-10" stroke="black" stroke-width="2" fill="none" />
<path d="M40,10 L50,15 M40,10 L50,5" stroke="black" stroke-width="2" fill="none" />
<path d="M40,-10 L50,-5 M40,-10 L50,-15" stroke="black" stroke-width="2" fill="none" />
<!-- 翅膀扇动动画 -->
<animateTransform attributeName="transform" type="translate" values="-300,100; 1300,100" dur="50s" repeatCount="indefinite" begin="10s" />
<animateTransform attributeName="transform" type="translate" additive="sum" values="0,0; 0,-5; 0,0; 0,5; 0,0" dur="3s" repeatCount="indefinite" begin="10s" />
</g>
</svg>
</div>
</body>
</html>
大海蓝天大雁飞过动画场景
于 2025-05-19 16:56:11 首次发布
扫一扫
1233
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
