CSS3夜晚孔明灯特效-优快云博客

<!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;
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
background: linear-gradient(to bottom, #000428, #0a1a3a);
overflow: hidden;
font-family: Arial, sans-serif;
}

.night-sky {
position: relative;
width: 100%;
height: 100vh;
overflow: hidden;
}

/* 星星 */
.stars {
position: absolute;
width: 100%;
height: 100%;
}

.star {
position: absolute;
background: white;
border-radius: 50%;
animation: twinkle 2s infinite alternate;
}

@keyframes twinkle {
0% { opacity: 0.2; }
100% { opacity: 1; }
}

/* 月亮 */
.moon {
position: absolute;
width: 80px;
height: 80px;
background: #f5f5dc;
border-radius: 50%;
top: 50px;
right: 100px;
box-shadow: 0 0 30px #f5f5dc;
}

/* 孔明灯 */
.lantern {
position: absolute;
animation: float-up 15s linear infinite;
}

.lantern-body {
width: 40px;
height: 50px;
background: #ff6b6b;
border-radius: 50% 50% 10% 10%;
position: relative;
box-shadow: 0 0 20px #ff6b6b;
}

.lantern-body:before {
content: '';
position: absolute;
width: 30px;
height: 5px;
background: #ffcc5c;
top: 10px;
left: 5px;
border-radius: 5px;
}

.lantern-body:after {
content: '';
position: absolute;
width: 20px;
height: 5px;
background: #ffcc5c;
bottom: 5px;
left: 10px;
border-radius: 5px;
}

.lantern-string {
position: absolute;
width: 2px;
height: 30px;
background: #333;
top: 50px;
left: 19px;
}

.lantern-basket {
position: absolute;
width: 20px;
height: 10px;
background: #8d6e63;
top: 80px;
left: 10px;
border-radius: 0 0 5px 5px;
}

.lantern-fire {
position: absolute;
width: 10px;
height: 15px;
background: #ff9e2c;
border-radius: 50% 50% 20% 20%;
top: 70px;
left: 15px;
box-shadow: 0 0 10px #ff5722;
animation: flicker 1s ease-in-out infinite alternate;
}

@keyframes float-up {
0% {
transform: translateY(100vh) translateX(var(--start-x));
opacity: 0;
}
10% {
opacity: 1;
}
90% {
opacity: 1;
}
100% {
transform: translateY(-100px) translateX(var(--end-x));
opacity: 0;
}
}

@keyframes flicker {
0%, 100% { transform: scale(1); opacity: 1; }
50% { transform: scale(1.1); opacity: 0.8; }
}

/* 底部链接 */
.footer-link {
position: fixed;
bottom: 20px;
color: rgba(255,255,255,0.7);
text-decoration: none;
font-size: 14px;
transition: all 0.3s;
z-index: 100;
}

.footer-link:hover {
color: #ff6b6b;
text-shadow: 0 0 10px #ff6b6b;
}
</style>
</head>
<body>
<div class="night-sky">
<div class="moon"></div>

<div class="stars" id="stars"></div>


<div class="lantern" style="--start-x: 10vw; --end-x: 5vw; left: 10%; animation-delay: 0s;">
<div class="lantern-body"></div>
<div class="lantern-string"></div>
<div class="lantern-basket"></div>
<div class="lantern-fire"></div>
</div>

<div class="lantern" style="--start-x: 20vw; --end-x: -5vw; left: 30%; animation-delay: 3s;">
<div class="lantern-body" style="background: #ff9e2c; box-shadow: 0 0 20px #ff9e2c;"></div>
<div class="lantern-string"></div>
<div class="lantern-basket"></div>
<div class="lantern-fire"></div>
</div>

<div class="lantern" style="--start-x: -10vw; --end-x: 5vw; left: 50%; animation-delay: 6s;">
<div class="lantern-body" style="background: #ff5252; box-shadow: 0 0 20px #ff5252;"></div>
<div class="lantern-string"></div>
<div class="lantern-basket"></div>
<div class="lantern-fire"></div>
</div>

<div class="lantern" style="--start-x: 15vw; --end-x: -10vw; left: 70%; animation-delay: 9s;">
<div class="lantern-body" style="background: #ff4081; box-shadow: 0 0 20px #ff4081;"></div>
<div class="lantern-string"></div>
<div class="lantern-basket"></div>
<div class="lantern-fire"></div>
</div>

<div class="lantern" style="--start-x: -5vw; --end-x: 10vw; left: 90%; animation-delay: 12s;">
<div class="lantern-body" style="background: #e91e63; box-shadow: 0 0 20px #e91e63;"></div>
<div class="lantern-string"></div>
<div class="lantern-basket"></div>
<div class="lantern-fire"></div>
</div>


</div>