CSS3发光油灯笼动画特效

原创已于 2025-06-27 11:30:27 修改 · 688 阅读

CC 4.0 BY-SA版权

文章标签：

于 2025-06-13 15:07:59 首次发布

<!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 {
background-color: #000;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
overflow: hidden;
margin: 0;
font-family: Arial, sans-serif;
}

.lantern-container {
position: relative;
width: 150px;
height: 200px;
animation: swing 3s infinite ease-in-out;
transform-origin: top center;
}

.lantern-top {
width: 60px;
height: 15px;
background-color: #d4a76a;
border-radius: 5px 5px 0 0;
margin: 0 auto;
position: relative;
z-index: 10;
}

.lantern-body {
width: 120px;
height: 160px;
background-color: #e74c3c;
border-radius: 60px / 80px;
margin: 0 auto;
position: relative;
box-shadow:
0 0 20px #f39c12,
0 0 40px #e74c3c,
0 0 60px #c0392b,
0 0 80px rgba(231, 76, 60, 0.5);
animation: glow 2s infinite alternate;
}

.lantern-body::before {
content: "";
position: absolute;
width: 100px;
height: 140px;
background-color: rgba(255, 255, 255, 0.1);
border-radius: 50px / 70px;
top: 10px;
left: 10px;
}

.lantern-body::after {
content: "福";
position: absolute;
font-size: 60px;
color: gold;
font-weight: bold;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
text-shadow: 0 0 5px rgba(255, 215, 0, 0.5);
}

.lantern-bottom {
width: 60px;
height: 15px;
background-color: #d4a76a;
border-radius: 0 0 5px 5px;
margin: 0 auto;
position: relative;
z-index: 10;
}

.lantern-handle {
width: 5px;
height: 50px;
background-color: #d4a76a;
margin: 0 auto;
position: relative;
}

.lantern-tassel {
position: absolute;
bottom: -100px;
left: 50%;
transform: translateX(-50%);
width: 5px;
height: 100px;
background: linear-gradient(to bottom, #d4a76a, #f1c40f, #d4a76a);
z-index: 5;
}

.lantern-tassel::before {
content: "";
position: absolute;
bottom: 0;
left: 50%;
transform: translateX(-50%);
width: 20px;
height: 20px;
border-radius: 50%;
background: linear-gradient(to bottom, #f1c40f, #d4a76a);
}

.sparkles {
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
pointer-events: none;
}

.sparkle {
position: absolute;
width: 3px;
height: 3px;
background-color: gold;
border-radius: 50%;
opacity: 0;
animation: float 3s infinite;
}

@keyframes glow {
from {
box-shadow:
0 0 20px #f39c12,
0 0 40px #e74c3c,
0 0 60px #c0392b,
0 0 80px rgba(231, 76, 60, 0.5);
}
to {
box-shadow:
0 0 30px #f39c12,
0 0 60px #e74c3c,
0 0 90px #c0392b,
0 0 120px rgba(231, 76, 60, 0.5);
}
}

@keyframes swing {
0%, 100% {
transform: rotate(-5deg);
}
50% {
transform: rotate(5deg);
}
}

@keyframes float {
0% {
transform: translateY(0) translateX(0);
opacity: 0;
}
10% {
opacity: 1;
}
90% {
opacity: 1;
}
100% {
transform: translateY(-100px) translateX(20px);
opacity: 0;
}
}

.credit {
position: absolute;
bottom: 20px;
color: #fff;
font-size: 12px;
text-align: center;
width: 100%;
}

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

/* 生成小光点 */
.generate-sparkles {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 100px;
height: 100px;
}
</style>
</head>
<body>
<div class="lantern-container">
<div class="lantern-handle"></div>
<div class="lantern-top"></div>
<div class="lantern-body"></div>
<div class="lantern-bottom"></div>
<div class="lantern-tassel"></div>
<div class="sparkles" id="sparkles"></div>
</div>



<script>
// 创建小光点
const sparklesContainer = document.getElementById('sparkles');
const numSparkles = 20;

for (let i = 0; i < numSparkles; i++) {
const sparkle = document.createElement('div');
sparkle.classList.add('sparkle');

// 随机位置
const x = Math.random() * 200 - 100;
const y = Math.random() * 100;

sparkle.style.left = `${50 + x}px`;
sparkle.style.top = `${100 + y}px`;

// 随机延迟和持续时间
const delay = Math.random() * 3;
const duration = 2 + Math.random() * 3;

sparkle.style.animationDelay = `${delay}s`;
sparkle.style.animationDuration = `${duration}s`;

sparklesContainer.appendChild(sparkle);
}
</script>
</body>
</html>