HTML生日蛋糕動態代碼
<!DOCTYPE html>
<html>
<head>
<style>
.candle {
width: 40px;
height: 70px;
background-color: red;
border-radius: 20px 20px 0 0;
position: absolute;
bottom: 120px;
left: 50%;
transform: translateX(-50%);
z-index: 1;
}
.flame {
width: 20px;
height: 40px;
background-color: orange;
border-radius: 50% 50% 0 0;
position: absolute;
bottom: 180px;
left: 50.5%;
transform: translateX(-50%);
-webkit-animation: flame 1s infinite alternate;
animation: flame 1s infinite alternate;
}
@-webkit-keyframes flame {
0% {
opacity: 1;
}
100% {
opacity: 0.3;
}
}
@keyframes flame {
0% {
opacity: 1;
}
100% {
opacity: 0.3;
}
}
.cake {
width: 250px;
height: 150px;
background-color: pink;
border-radius: 0 0 10px 10px;
position: absolute;
bottom: 0;
left: 50%;
transform: translateX(-50%);
box-shadow: 2px 2px 20px 5px rgba(0, 0, 0, 0.3);
}
.cake::before {
content: '';
width: 20px;
height: 20px;
background-color: pink;
border-radius: 50%;
position: absolute;
top: -10px;
left: 50%;
transform: translateX(-50%);
}
.cake::after {
content: '';
width: 20px;
height: 20px;
background-color: pink;
border-radius: 50%;
position: absolute;
top: -10px;
left: 54%;
transform: translateX(-50%);
}</head>
<body>
<div class="candle"></div>
<div class="flame"></div>
<div class="cake"></div>
</body>
</html>以上是一段HTML代碼，主要功能是制作生日蛋糕動畫效果。
在這段代碼中，使用了一些CSS樣式，例如設置蠟燭能夠在蛋糕上面并且居中顯示，同時制作了火焰的動畫效果，讓蠟燭像是在真實燃燒一樣。
除了以上的動態效果之外，還設置了整個蛋糕的寬度、高度，以及顏色，使之成為一個完整的生日蛋糕。
這段HTML代碼可用于網頁的制作，也可以用于電子賀卡的制作等場合，為我們的生活增添了一份美好的慶祝氣氛。