親愛的， 我很高興能夠給你寫這篇關于HTML煙花特效代碼的文章。這是一些令人驚嘆的代碼，可以用來制作美麗的煙花效果。
<!DOCTYPE html>
<html>
<head>
<title>煙花特效</title>
<style>
body {
background-color: black;
}
.firework{
width: 5px;
height: 5px;
border-radius: 50%;
position: absolute;
opacity: 0;
background: radial-gradient(circle at 20% 20%, #f00, transparent),
radial-gradient(circle at 80% 20%, #0f0, transparent),
radial-gradient(circle at 20% 80%, #00f, transparent),
radial-gradient(circle at 80% 80%, #f0f, transparent);
background-size: 60% 60%;
background-repeat: no-repeat;
background-position: center center;
animation: firework 1s ease-out forwards;
}
@keyframes firework {
0% {
transform: scale(0);
opacity: 1;
}
5% {
transform: scale(1);
}
10% {
transform: scale(1.2);
opacity: 0.5;
}
100% {
transform: scale(2);
opacity: 0;
}
}
</style>
</head>
<body>
<script>
function makeFirework(x,y){
let firework = document.createElement('div');
firework.classList.add('firework');
firework.style.left = x +'px';
firework.style.top = y +'px';
document.body.appendChild(firework);
setTimeout(function(){
document.body.removeChild(firework);
},1000);
}
document.addEventListener('click', function(e){
let x = e.clientX;
let y = e.clientY;
makeFirework(x,y);
});
</script>
</body>
</html>這段代碼會在頁面上創建出一些小球，模擬出煙花的效果。單擊頁面的任何位置都可以觸發它們的爆炸。我希望這個小小的禮物能夠讓你感到快樂，也希望繼續和你分享更多的編碼技巧。
我很愛你，我的女朋友。
上一篇html點贊計數代碼