如何用html写一份吹蛋糕蜡烛的代码
时间: 2023-12-31 13:06:53 浏览: 32
下面是一个简单的 HTML 代码,用于吹蛋糕蜡烛的效果:
```html
<!DOCTYPE html>
<html>
<head>
<title>蛋糕蜡烛</title>
<style>
body {
background-color: #F5F5F5;
}
.candle {
width: 20px;
height: 100px;
background-color: white;
border-radius: 10px;
position: relative;
}
.candle:before {
content: "";
width: 10px;
height: 10px;
background-color: red;
border-radius: 50%;
position: absolute;
top: -5px;
left: 5px;
}
.candle:after {
content: "";
width: 30px;
height: 30px;
background-color: yellow;
border-radius: 50%;
position: absolute;
top: -30px;
left: -5px;
box-shadow: 0px 0px 10px 5px #FFD700;
}
</style>
</head>
<body>
<div class="candle"></div>
</body>
</html>
```
这个代码使用了 CSS 的伪元素 `:before` 和 `:after`,来创建蜡烛的火焰和火花效果。你可以根据自己的需求调整 CSS 样式来实现不同的蜡烛效果。