HTML5 带有动画效果的 "Happy Birthday" 代码
时间: 2023-05-17 21:03:18 浏览: 83
这是一个使用 HTML5 制作的带有动画效果的 "Happy Birthday" 的代码示例:
```
<!DOCTYPE html>
<html>
<head>
<style>
.cake {
position: relative;
width: 300px;
height: 300px;
margin: 50px auto;
}
.candle {
position: absolute;
width: 20px;
height: 100px;
background: orange;
border-radius: 10px 10px 0 0;
transform: translate(140px, -40px);
animation: flicker 1s infinite;
}
.candle::before {
content: "";
position: absolute;
width: 20px;
height: 20px;
background: white;
border-radius: 50%;
top: -20px;
}
.candle::after {
content: "";
position: absolute;
width: 20px;
height: 50px;
background: white;
border-radius: 10px 10px 0 0;
top: -50px;
}
@keyframes flicker {
0% { transform: translate(140px, -40px) scaleY(1); }
50% { transform: translate(140px, -40px) scaleY(0.5); }
100% { transform: translate(140px, -40px) scaleY(1); }
}
.cake-layer {
position: absolute;
width: 300px;
height: 300px;
border-radius: 50%;
background: pink;
transform: translateY(100px);
}
.cake-layer:nth-child(2) {
background: purple;
transform: translateY(50px);
}
.cake-layer:nth-child(3) {
background: yellow;
transform: translateY(0px);
}
.cake-layer:nth-child(4) {
background: orange;
transform: translateY(-50px);
}
.cake-layer:nth-child(5) {
background: red;
transform: translateY(-100px);
}
.cake-layer:nth-child(6) {
background: green;
transform: translateY(-150px);
}
.cake-layer:nth-child(7) {
background: blue;
transform: translateY(-200px);
}
.cake-layer:nth-child(8) {
background: purple;
transform: translateY(-250px);
}
.cake-layer:nth-child(9) {
background: pink;
transform: translateY(-300px);
}
.frosting {
position: absolute;
width: 300px;
height: 300px;
border-radius: 50%;
background: white;
box-shadow: 0 0 20px rgba(0, 0, 0, 0.5);
transform: translateY(-350