香港返居可為雅閣降64,000元，亦補(bǔ)貼7次免費(fèi)保養(yǎng)
資料圖片，長的與文無關(guān)
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>HTML煙花</title>
<style>
body {
background: #070A58;
}
.fireworks {
position: absolute;
width: 50px;
height: 50px;
background: #FFF;
border-radius: 50%;
animation: fireworks 2s ease-in-out infinite;
}
.fireworks::before, .fireworks::after {
content: "";
position: absolute;
width: 50px;
height: 50px;
background: #FFF;
border-radius: 50%;
}
.fireworks::before {
left: 20px;
animation: fireworks2 2s ease-in-out infinite;
}
.fireworks::after {
top: 20px;
animation: fireworks3 2s ease-in-out infinite;
}
@keyframes fireworks {
0% {
transform: scale(1);
}
50% {
transform: scale(0.75);
}
100% {
transform: scale(1);
}
}
@keyframes fireworks2 {
0% {
left: 20px;
}
50% {
left: 0;
}
100% {
left: 20px;
}
}
@keyframes fireworks3 {
0% {
top: 20px;
}
50% {
top: 0;
}
100% {
top: 20px;
}
}
</style>
</head>
<body>
<div class="fireworks"></div>
</body>
</html>以上是HTML煙花的源代碼，通過CSS的動(dòng)畫實(shí)現(xiàn)了煙花的效果。代碼中的關(guān)鍵點(diǎn)在于使用了偽元素before和after，通過動(dòng)畫實(shí)現(xiàn)了不同方向的小煙花效果。