代码写一个生日快乐动画
时间: 2023-04-06 21:04:59 浏览: 133
好的,我可以回答这个问题。以下是一个简单的生日快乐动画代码:
```
<html>
<head>
<title>生日快乐!</title>
<style>
body {
background-color: #f3d3d3;
}
#cake {
position: relative;
margin: 0 auto;
width: 300px;
height: 400px;
}
#cake:before {
content: "";
position: absolute;
top: 0;
left: 50%;
transform: translateX(-50%);
width: 200px;
height: 200px;
border-radius: 50%;
background-color: #f8e7a1;
}
#cake:after {
content: "";
position: absolute;
top: 200px;
left: 50%;
transform: translateX(-50%);
width: 250px;
height: 200px;
background-color: #f8e7a1;
}
#candle {
position: absolute;
top: 100px;
left: 50%;
transform: translateX(-50%);
width: 20px;
height: 100px;
background-color: #ff0000;
border-radius: 10px;
}
#flame {
position: absolute;
top: 0;
left: 50%;
transform: translateX(-50%);
width: 30px;
height: 50px;
background-color: #ff9900;
border-radius: 50%;
animation: flame 1s infinite alternate;
}
@keyframes flame {
0% {
transform: translateX(-50%) scaleY(1);
}
100% {
transform: translateX(-50%) scaleY(1.2);
}
}
</style>
</head>
<body>
<div id="cake">
<div id="candle">
<div id="flame"></div>
</div>
</div>
<script>
setTimeout(function() {
alert("生日快乐!");
}, 5000);
</script>
</body>
</html>
```
这是一个简单的生日蛋糕动画,其中有一个蜡烛和火焰,5秒后会弹出生日快乐的提示框。希望这个代码能够帮到你!
阅读全文