HTML是网页制作中最基础也是最重要的语言之一，它提供了丰富的元素来实现网页的各种效果。其中，爱心烟花效果是让网页更具有情感和艺术感的一种效果。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>HTML爱心烟花效果</title>
<style>
/*爱心动画*/
.heart {
background-color: #FF69B4;
border-radius: 50% 50% 0 0;
height: 50px;
position: relative;
transform: rotate(45deg);
width: 50px;
}
.heart:before,
.heart:after {
background-color: #FF69B4;
border-radius: 50%;
content: "";
height: 50px;
position: absolute;
width: 50px;
}
.heart:before {
top: -25px;
left: 0;
}
.heart:after {
left: 25px;
top: 0;
}
/*烟花效果*/
body {
background-color: #0D2551;
}
.firework {
background-color: #FDB813;
border-radius: 50%;
height: 10px;
left: 50%;
position: absolute;
top: 50%;
transform: translate(-50%, -50%);
width: 10px;
}
.firework:before,
.firework:after {
background-color: #FDB813;
content: "";
height: 6px;
position: absolute;
top: 50%;
width: 6px;
}
.firework:before {
left: -6px;
transform: translateY(-50%);
}
.firework:after {
left: 6px;
transform: translateY(-50%);
}
</style>
</head>
<body>
<div class="heart"></div>
<div class="firework">
<div class="spark"></div>
</div>
<script>
//爆炸效果
var firework = document.querySelector('.firework');
firework.addEventListener("click", function () {
//创建5个小球
for (var i = 0; i < 5; i++) {
var spark = document.createElement("div");
spark.className = "spark";
firework.appendChild(spark);
//创建小球位置随机
var angle = Math.random() * 360;
var x = Math.cos(angle) * 50 + Math.random() * 10;
var y = Math.sin(angle) * 50 + Math.random() * 10;
//小球移动
setTimeout(function () {
spark.style.transform = "translate(" + x + "px," + y + "px)";
spark.style.opacity = 0;
}, 50);
}
//去除小球
setTimeout(function () {
var sparks = document.querySelectorAll(".spark");
for (var j = 0; j < sparks.length; j++) {
firework.removeChild(sparks[j]);
}
}, 3000);
});
</script>
</body>
</html>以上代码实现了一个简单的HTML爱心烟花效果，通过上述代码的学习，你可以了解到HTML的一些基础元素，并且拓展出了更加丰富的效果，可以极大的增加网页的吸引力和趣味性。