console
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="https://cdn.tailwindcss.com"></script>
<title>生日快乐</title>
<style>
body {
background-color: #FFC0CB;
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
height: 100vh;
margin: 0;
overflow: hidden;
}
h1 {
font-size: 48px;
color: #ff6347;
text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.2);
animation: fadeInUp 1s ease-out;
z-index: 2;
}
p {
font-size: 24px;
color: #333;
margin-top: 20px;
animation: fadeInUp 1.2s ease-out;
z-index: 2;
}
.balloon {
width: 100px;
height: 120px;
background-color: #ff69b4;
border-radius: 50%;
position: absolute;
bottom: -150px;
animation: floatUp 10s linear infinite;
box-shadow: inset -10px -10px 20px rgba(0, 0, 0, 0.2);
z-index: 1;
}
.balloon:nth-child(2) {
left: 10%;
background-color: #87cefa;
animation-delay: 2s;
}
.balloon:nth-child(3) {
left: 20%;
background-color: #98fb98;
animation-delay: 4s;
}
.balloon:nth-child(4) {
left: 30%;
background-color: #ffd700;
animation-delay: 6s;
}
.balloon:nth-child(5) {
left: 40%;
background-color: #dda0dd;
animation-delay: 8s;
}
.balloon:nth-child(6) {
left: 60%;
background-color: #ff69b4;
animation-delay: 1s;
}
.balloon:nth-child(7) {
left: 70%;
background-color: #87cefa;
animation-delay: 3s;
}
.balloon:nth-child(8) {
left: 80%;
background-color: #98fb98;
animation-delay: 5s;
}
.balloon:nth-child(9) {
left: 90%;
background-color: #ffd700;
animation-delay: 7s;
}
.cake {
width: 200px;
height: 150px;
background-color: #f0e68c;
border-radius: 10px;
position: relative;
margin-top: 100px;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
z-index: 2;
}
.cake::before {
content: '';
width: 180px;
height: 80px;
background-color: #d2b48c;
border-radius: 10px;
position: absolute;
bottom: 0;
left: 10px;
}
.candle {
width: 10px;
height: 50px;
background-color: #ff0000;
position: absolute;
top: -50px;
left: 95px;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}
.flame {
width: 12px;
height: 20px;
background-color: #ffd700;
border-radius: 50%;
position: absolute;
top: -20px;
left: -1px;
animation: flicker 1s ease-in-out infinite alternate;
}
.confetti {
width: 10px;
height: 10px;
background-color: #ff6347;
position: absolute;
top: -10px;
animation: fall 3s linear infinite;
z-index: 1;
}
.confetti:nth-child(10) {
left: 15%;
background-color: #87cefa;
animation-delay: 0.5s;
}
.confetti:nth-child(11) {
left: 25%;
background-color: #98fb98;
animation-delay: 1s;
}
.confetti:nth-child(12) {
left: 35%;
background-color: #ffd700;
animation-delay: 1.5s;
}
.confetti:nth-child(13) {
left: 45%;
background-color: #dda0dd;
animation-delay: 2s;
}
.confetti:nth-child(14) {
left: 55%;
background-color: #ff69b4;
animation-delay: 2.5s;
}
.confetti:nth-child(15) {
left: 65%;
background-color: #87cefa;
animation-delay: 3s;
}
.confetti:nth-child(16) {
left: 75%;
background-color: #98fb98;
animation-delay: 3.5s;
}
.confetti:nth-child(17) {
left: 85%;
background-color: #ffd700;
animation-delay: 4s;
}
.star {
width: 20px;
height: 20px;
background-color: #ffff00;
clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);
position: absolute;
top: -20px;
animation: fall 5s linear infinite;
z-index: 1;
}
.star:nth-child(18) {
left: 12%;
animation-delay: 0.8s;
}
.star:nth-child(19) {
left: 22%;
animation-delay: 1.6s;
}
.star:nth-child(20) {
left: 32%;
animation-delay: 2.4s;
}
.star:nth-child(21) {
left: 42%;
animation-delay: 3.2s;
}
.star:nth-child(22) {
left: 52%;
animation-delay: 4s;
}
.star:nth-child(23) {
left: 62%;
animation-delay: 4.8s;
}
.star:nth-child(24) {
left: 72%;
animation-delay: 5.6s;
}
.star:nth-child(25) {
left: 82%;
animation-delay: 6.4s;
}
@keyframes floatUp {
from {
bottom: -150px;
}
to {
bottom: 100vh;
}
}
@keyframes fadeInUp {
from {
opacity: 0;
transform: translateY(20px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
@keyframes flicker {
0% {
transform: scale(1);
}
100% {
transform: scale(1.1);
}
}
@keyframes fall {
from {
top: -10px;
}
to {
top: 100vh;
}
}
</style>
</head>
<body>
<h1>生日快乐，王莹莹</h1>
<p>祝我搞怪的妹妹越来越美丽，中考夺魁</p>
<div class="cake">
<div class="candle">
<div class="flame"></div>
</div>
</div>
<div class="balloon"></div>
<div class="balloon"></div>
<div class="balloon"></div>
<div class="balloon"></div>
<div class="balloon"></div>
<div class="balloon"></div>
<div class="balloon"></div>
<div class="balloon"></div>
<div class="balloon"></div>
<div class="confetti"></div>
<div class="confetti"></div>
<div class="confetti"></div>
<div class="confetti"></div>
<div class="confetti"></div>
<div class="confetti"></div>
<div class="confetti"></div>
<div class="confetti"></div>
<div class="star"></div>
<div class="star"></div>
<div class="star"></div>
<div class="star"></div>
<div class="star"></div>
<div class="star"></div>
<div class="star"></div>
<div class="star"></div>
</body>
</html>