生日蛋糕带特效代码html
时间: 2024-09-15 14:11:40 浏览: 33
html生日祝福特效代码
生日蛋糕带有特效的HTML代码通常是指使用HTML、CSS以及JavaScript等技术来实现一个视觉效果丰富、有交互的网页蛋糕。以下是一个简单的示例,展示了如何使用HTML和CSS创建一个具有基本动画效果的生日蛋糕。
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>生日蛋糕特效</title>
<style>
.cake-container {
position: relative;
width: 200px;
height: 200px;
margin: 50px auto;
background-color: #f3e6e6;
border-radius: 20px;
overflow: hidden;
}
.candle {
position: absolute;
top: -20px;
left: 50%;
width: 10px;
height: 50px;
background-color: #d94e0b;
transform: translateX(-50%);
}
.flame {
position: absolute;
top: -5px;
left: 50%;
width: 10px;
height: 20px;
background-color: #fff2b5;
border-radius: 50%;
box-shadow: 0 0 10px #fff2b5;
transform: translateX(-50%);
animation: flicker 0.5s infinite;
}
@keyframes flicker {
0%, 100% { box-shadow: 0 0 10px #fff2b5; }
50% { box-shadow: 0 0 5px #fff2b5; }
}
.cake {
position: relative;
top: 20px;
left: 0;
width: 100%;
height: 100%;
background-color: #fff;
border-radius: 10px;
box-shadow: 0 5px 5px rgba(0,0,0,0.1);
}
.candleholders {
position: absolute;
width: 100%;
bottom: 5px;
text-align: center;
}
.candleholder {
display: inline-block;
width: 10px;
height: 10px;
background-color: #c2c2c2;
border-radius: 50%;
margin: 0 5px;
}
</style>
</head>
<body>
<div class="cake-container">
<div class="candleholders">
<div class="candleholder"></div>
<div class="candleholder"></div>
<div class="candleholder"></div>
</div>
<div class="candle">
<div class="flame"></div>
</div>
<div class="cake"></div>
</div>
</body>
</html>
```
这段代码创建了一个简单的蛋糕容器,在其中加入了一个燃烧着的蜡烛。蜡烛上的火焰使用了CSS动画来模拟烛光的闪烁效果。
阅读全文