纯CSS3蓝天白云太阳动画特效

ziblog

已于 2025-06-27 11:34:17 修改

阅读量590

点赞数 22

CC 4.0 BY-SA版权

文章标签： css css3 html

于 2025-06-13 13:38:58 首次发布

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

<!DOCTYPE html>
<html lang="zh">
<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, #E0F7FA);
font-family: Arial, sans-serif;
}

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

.sun {
position: absolute;
top: 15%;
left: 15%;
width: 100px;
height: 100px;
background: #FFD700;
border-radius: 50%;
box-shadow: 0 0 50px #FFA500;
animation: sun-glow 4s ease-in-out infinite alternate;
}

.sun-rays {
position: absolute;
top: 50%;
left: 50%;
width: 120px;
height: 120px;
margin-left: -60px;
margin-top: -60px;
border-radius: 50%;
border: 5px solid rgba(255, 215, 0, 0.5);
animation: sun-rays 4s ease-in-out infinite alternate;
}

.sun-rays::before, .sun-rays::after {
content: '';
position: absolute;
top: 50%;
left: 50%;
width: 120px;
height: 120px;
margin-left: -60px;
margin-top: -60px;
border-radius: 50%;
border: 5px solid rgba(255, 215, 0, 0.5);
}

.sun-rays::before {
transform: rotate(45deg);
}

.sun-rays::after {
transform: rotate(90deg);
}

.cloud {
position: absolute;
background: white;
border-radius: 50%;
filter: blur(5px);
animation: cloud-move linear infinite;
}

.cloud1 {
top: 20%;
left: 10%;
width: 100px;
height: 60px;
animation-duration: 60s;
}

.cloud1::before, .cloud1::after {
content: '';
position: absolute;
background: white;
border-radius: 50%;
filter: blur(5px);
}

.cloud1::before {
top: -20px;
left: 20px;
width: 50px;
height: 50px;
}

.cloud1::after {
top: -10px;
right: 20px;
width: 70px;
height: 70px;
}

.cloud2 {
top: 30%;
right: 5%;
width: 150px;
height: 80px;
animation-duration: 80s;
animation-delay: 10s;
}

.cloud2::before, .cloud2::after {
content: '';
position: absolute;
background: white;
border-radius: 50%;
filter: blur(5px);
}

.cloud2::before {
top: -30px;
left: 30px;
width: 60px;
height: 60px;
}

.cloud2::after {
top: -20px;
right: 30px;
width: 80px;
height: 80px;
}

.cloud3 {
top: 15%;
right: 20%;
width: 80px;
height: 50px;
animation-duration: 50s;
animation-delay: 5s;
}

.cloud3::before, .cloud3::after {
content: '';
position: absolute;
background: white;
border-radius: 50%;
filter: blur(5px);
}

.cloud3::before {
top: -15px;
left: 15px;
width: 40px;
height: 40px;
}

.cloud3::after {
top: -10px;
right: 15px;
width: 50px;
height: 50px;
}

.bird {
position: absolute;
width: 30px;
height: 20px;
animation: bird-fly linear infinite;
}

.bird::before, .bird::after {
content: '';
position: absolute;
top: 0;
width: 10px;
height: 3px;
background: #333;
border-radius: 50% 50% 0 0;
animation: bird-wings 0.4s linear infinite alternate;
}

.bird::before {
left: 0;
transform-origin: right center;
}

.bird::after {
right: 0;
transform-origin: left center;
}

.bird1 {
top: 25%;
left: 10%;
animation-duration: 30s;
}

.bird2 {
top: 35%;
left: 30%;
animation-duration: 40s;
animation-delay: 5s;
}

.link {
position: absolute;
bottom: 20px;
right: 20px;
color: #1E88E5;
font-size: 14px;
text-decoration: none;
font-weight: bold;
z-index: 10;
}

@keyframes sun-glow {
0% { box-shadow: 0 0 50px #FFA500; }
100% { box-shadow: 0 0 80px #FF8C00; }
}

@keyframes sun-rays {
0% { transform: scale(1); opacity: 0.5; }
100% { transform: scale(1.2); opacity: 0.2; }
}

@keyframes cloud-move {
0% { transform: translateX(-150%); }
100% { transform: translateX(150vw); }
}

@keyframes bird-fly {
0% { transform: translateX(-100px); }
100% { transform: translateX(100vw); }
}

@keyframes bird-wings {
0% { transform: rotate(0deg); }
100% { transform: rotate(45deg); }
}
</style>
</head>
<body>
<div class="sky">
<div class="sun">
<div class="sun-rays"></div>
</div>

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

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


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