卡通户外场景

原创已于 2025-06-27 13:14:40 修改 · 344 阅读

CC 4.0 BY-SA版权

文章标签：

于 2025-06-12 11:55:20 首次发布

<!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;
padding: 0;
overflow: hidden;
background: linear-gradient(to bottom, #87CEEB 0%, #E0F7FA 100%);
height: 100vh;
font-family: 'Arial', sans-serif;
}

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

.sun {
position: absolute;
top: 10%;
left: 80%;
width: 80px;
height: 80px;
background: #FFD700;
border-radius: 50%;
box-shadow: 0 0 40px #FFD700;
animation: sunGlow 4s infinite alternate;
}

@keyframes sunGlow {
0% { box-shadow: 0 0 40px #FFD700; }
100% { box-shadow: 0 0 80px #FFD700; }
}

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

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

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

.cloud3 {
width: 80px;
height: 50px;
top: 20%;
left: 70%;
animation: cloudMove 25s linear infinite;
}

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

.mountain {
position: absolute;
bottom: 20%;
width: 0;
height: 0;
border-left: 150px solid transparent;
border-right: 150px solid transparent;
border-bottom: 200px solid #4A7C59;
left: 10%;
}

.mountain2 {
left: 30%;
border-bottom: 180px solid #3A6659;
transform: scaleX(0.8);
}

.mountain3 {
left: 50%;
border-bottom: 220px solid #5A8C6E;
transform: scaleX(1.2);
}

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

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

.tree-trunk {
width: 20px;
height: 60px;
background: #8D6E63;
margin: 0 auto;
}

.tree-leaves {
width: 80px;
height: 100px;
background: #4CAF50;
border-radius: 50%;
margin-top: -30px;
margin-left: -30px;
}

.tree1 { left: 15%; }
.tree2 { left: 25%; transform: scale(0.9); }
.tree3 { left: 35%; transform: scale(1.1); }
.tree4 { left: 65%; transform: scale(0.8); }
.tree5 { left: 75%; transform: scale(1.2); }

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

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

.bird1 { top: 30%; animation-delay: 0s; }
.bird2 { top: 35%; animation-delay: 3s; }
.bird3 { top: 40%; animation-delay: 6s; }

.link-container {
position: absolute;
bottom: 10px;
right: 10px;
background: rgba(255, 255, 255, 0.7);
padding: 5px 10px;
border-radius: 5px;
}

.link-container a {
color: #2196F3;
text-decoration: none;
font-size: 12px;
}
</style>
</head>
<body>
<div class="scene">
<div class="sun"></div>

<div class="cloud cloud1"></div>
<div class="cloud cloud2"></div>
<div class="cloud cloud3"></div>

<div class="mountain"></div>
<div class="mountain mountain2"></div>
<div class="mountain mountain3"></div>

<div class="tree tree1">
<div class="tree-trunk"></div>
<div class="tree-leaves"></div>
</div>
<div class="tree tree2">
<div class="tree-trunk"></div>
<div class="tree-leaves"></div>
</div>
<div class="tree tree3">
<div class="tree-trunk"></div>
<div class="tree-leaves"></div>
</div>
<div class="tree tree4">
<div class="tree-trunk"></div>
<div class="tree-leaves"></div>
</div>
<div class="tree tree5">
<div class="tree-trunk"></div>
<div class="tree-leaves"></div>
</div>

<div class="bird bird1">🐦</div>
<div class="bird bird2">🐦</div>
<div class="bird bird3">🐦</div>

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

<div class="link-container">

</div>
</div>
</body>
</html>