HTML煙花代碼是一種通過HTML和CSS語言實現的動態效果，可以使網頁更加生動、有趣。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>HTML煙花</title>
<style>
body {
background-color: #111;
}
.firework {
position: fixed;
left: 50%;
top: 50%;
transform: translate(-50%,-50%);
width: 20px;
height: 20px;
border-radius: 20px;
background-color: #f00;
animation: firework 1.5s ease-in;
}
.particle {
position: absolute;
width: 2px;
height: 2px;
border-radius: 2px;
background-color: #f00;
animation: particle 1s ease-out;
}
@keyframes particle {
0% {
opacity: 0;
transform: scale(1);
}
60% {
opacity: 1;
transform: scale(1.5);
}
100% {
opacity: 0;
transform: scale(2);
}
}
@keyframes firework {
0% {
height: 2px;
border-radius: 2px;
}
20% {
height: 20px;
border-radius: 20px 20px 0 0;
}
40% {
height: 20px;
border-radius: 20px;
}
60% {
height: 40px;
border-radius: 50%;
box-shadow: 0 0 10px white;
}
80% {
height: 20px;
border-radius: 50%;
box-shadow: none;
}
100% {
height: 2px;
border-radius: 2px;
}
}
</style>
</head>
<body>
<div class="firework">
<div class="particle" style="left: -15px; top: -15px;"></div>
<div class="particle" style="left: 15px; top: -15px;"></div>
<div class="particle" style="left: -15px; top: 15px;"></div>
<div class="particle" style="left: 15px; top: 15px;"></div>
</div>
</body>
</html>在這段代碼中，我們使用了CSS中的動畫和變換效果，通過對煙花和粒子的位置、大小、形狀、顏色等屬性進行不斷變化，最終形成了像真正煙花一樣絢爛奪目的效果。
上一篇vue怎么添加click
下一篇css 中寫js 代碼