生日蛋糕纸屑特效

原创已于 2025-06-27 13:20:31 修改 · 743 阅读

CC 4.0 BY-SA版权

文章标签：

于 2025-06-10 13:01:00 首次发布

<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>生日蛋糕纸屑特效</title>
<style>
body {
margin: 0;
padding: 0;
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
background: #ffebee;
overflow: hidden;
font-family: 'Arial', sans-serif;
}

.birthday-container {
position: relative;
width: 100%;
height: 100vh;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}

/* 蛋糕样式 */
.cake {
position: relative;
width: 220px;
height: 150px;
z-index: 10;
}

.cake-layer-bottom {
position: absolute;
width: 200px;
height: 60px;
background: #ff8a80;
border-radius: 10px 10px 0 0;
bottom: 0;
left: 10px;
}

.cake-layer-middle {
position: absolute;
width: 180px;
height: 50px;
background: #ff5252;
border-radius: 10px 10px 0 0;
bottom: 60px;
left: 20px;
}

.cake-layer-top {
position: absolute;
width: 160px;
height: 40px;
background: #ff1744;
border-radius: 10px 10px 0 0;
bottom: 110px;
left: 30px;
}

/* 蜡烛样式 */
.candle {
position: absolute;
width: 8px;
height: 50px;
background: white;
bottom: 150px;
left: 106px;
z-index: 15;
}

.flame {
position: absolute;
width: 15px;
height: 25px;
background: #ffeb3b;
border-radius: 50% 50% 20% 20%;
bottom: 200px;
left: 100px;
box-shadow: 0 0 10px #ff9800, 0 0 20px #ff5722;
animation: flicker 0.8s ease-in-out infinite alternate;
z-index: 20;
}

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

/* 纸屑样式 */
.confetti-container {
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
overflow: hidden;
z-index: 5;
}

.confetti {
position: absolute;
width: 12px;
height: 12px;
opacity: 0;
animation: confetti-fall 5s linear infinite;
}

/* 不同形状的纸屑 */
.confetti.square {
background: #f44336;
}

.confetti.circle {
background: #4CAF50;
border-radius: 50%;
}

.confetti.triangle {
width: 0;
height: 0;
border-left: 6px solid transparent;
border-right: 6px solid transparent;
border-bottom: 12px solid #2196F3;
background: transparent;
}

/* 纸屑动画 */
@keyframes confetti-fall {
0% {
transform: translateY(-100px) rotate(0deg) translateX(0);
opacity: 1;
}
100% {
transform: translateY(100vh) rotate(360deg) translateX(50px);
opacity: 0;
}
}

/* 祝福文字 */
.birthday-message {
margin-top: 80px;
font-size: 28px;
font-weight: bold;
color: #d32f2f;
text-shadow: 2px 2px 4px rgba(0,0,0,0.2);
z-index: 30;
animation: pulse 1.5s infinite alternate;
}

@keyframes pulse {
from {
transform: scale(1);
}
to {
transform: scale(1.1);
}
}

/* 底部链接 */
.footer-link {
position: absolute;
bottom: 20px;
color: #d32f2f;
text-decoration: none;
font-size: 14px;
opacity: 0.7;
transition: opacity 0.3s;
z-index: 30;
}

.footer-link:hover {
opacity: 1;
}
</style>
</head>
<body>
<div class="birthday-container">

<div class="confetti-container">

<div class="confetti square" style="left: 5%; animation-delay: 0s;"></div>
<div class="confetti circle" style="left: 10%; animation-delay: 0.5s;"></div>
<div class="confetti triangle" style="left: 15%; animation-delay: 1s;"></div>
<div class="confetti square" style="left: 20%; animation-delay: 1.5s;"></div>
<div class="confetti circle" style="left: 25%; animation-delay: 2s;"></div>
<div class="confetti triangle" style="left: 30%; animation-delay: 2.5s;"></div>
<div class="confetti square" style="left: 35%; animation-delay: 3s;"></div>
<div class="confetti circle" style="left: 40%; animation-delay: 3.5s;"></div>
<div class="confetti triangle" style="left: 45%; animation-delay: 4s;"></div>
<div class="confetti square" style="left: 50%; animation-delay: 0.2s;"></div>
<div class="confetti circle" style="left: 55%; animation-delay: 0.7s;"></div>
<div class="confetti triangle" style="left: 60%; animation-delay: 1.2s;"></div>
<div class="confetti square" style="left: 65%; animation-delay: 1.7s;"></div>
<div class="confetti circle" style="left: 70%; animation-delay: 2.2s;"></div>
<div class="confetti triangle" style="left: 75%; animation-delay: 2.7s;"></div>
<div class="confetti square" style="left: 80%; animation-delay: 3.2s;"></div>
<div class="confetti circle" style="left: 85%; animation-delay: 3.7s;"></div>
<div class="confetti triangle" style="left: 90%; animation-delay: 4.2s;"></div>
<div class="confetti square" style="left: 95%; animation-delay: 4.7s;"></div>
<div class="confetti circle" style="left: 100%; animation-delay: 0.3s;"></div>
</div>


<div class="cake">
<div class="cake-layer-bottom"></div>
<div class="cake-layer-middle"></div>
<div class="cake-layer-top"></div>
<div class="candle"></div>
<div class="flame"></div>
</div>


<div class="birthday-message">生日快乐!</div>


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