HTML愛心煙花特效是一種非常流行的前端展示動畫效果，它適用于各種類型的web應用程序。本文將介紹一些常見的HTML愛心煙花特效代碼。
首先，我們需要使用HTML的基本結構構建頁面，并為它添加必要的元素。以下是一個簡單的示例：
<html> <head> <title>HTML愛心煙花特效代碼大全</title> </head> <body> </body> </html>接下來，我們可以使用CSS和JavaScript來制作HTML愛心煙花特效。下面是一些示例代碼：
示例1：使用CSS制作愛心形狀
<style>
.heart {
position: relative;
width: 100px;
height: 90px;
transform: rotate(-45deg);
margin: 10px;
cursor: pointer;
font-family: "Arial", cursive;
text-align: center;
font-size: 40px;
color: #ff69b4;
}
.heart::before,
.heart::after {
content: "";
position: absolute;
background-color: #ff69b4;
left: 50px;
top: 0;
width: 50px;
height: 80px;
border-radius: 50px 50px 0 0;
transform: rotate(-45deg);
transform-origin: 0 100%;
}
.heart::after {
left: 0;
transform: rotate(45deg);
transform-origin: 100% 100%;
}
</style>
<div class="heart">
<span></span>
</div>示例2：使用CSS制作煙花動畫效果
<style>
.fire {
position: relative;
width: 60px;
height: 60px;
background-color: #ff4500;
border-radius: 50%;
animation: firework 1s infinite;
}
.fire::before,
.fire::after {
content: "";
position: absolute;
background-color: #fff;
width: 10px;
height: 10px;
border-radius: 50%;
left: 25px;
top: 5px;
animation: sparks 1s infinite;
}
.fire::before {
left: 10px;
top: 20px;
animation-delay: 0.15s;
}
.fire::after {
left: 40px;
top: 20px;
animation-delay: 0.25s;
}
@keyframes firework {
0% {
box-shadow: 0 0 10px 5px #ff4500;
}
10%,
40% {
box-shadow: 0 0 20px 10px #ff6347;
}
20%,
60% {
box-shadow: 0 0 30px 15px #ff6347;
}
30%,
90% {
box-shadow: 0 0 40px 20px #ff6347;
}
100% {
opacity: 0;
}
}
@keyframes sparks {
0% {
transform: translate(0, 0);
}
50% {
transform: translate(-10px, 20px);
}
100% {
transform: translate(10px, 50px);
opacity: 0;
}
}
</style>
<div class="fire"></div>示例3：使用JavaScript制作鼠標點擊事件
<script>
document.addEventListener("click", function(e) {
createHeart(e.clientX, e.clientY);
});
function createHeart(x, y) {
var heart = document.createElement("div");
heart.classList.add("heart");
heart.style.top = y + "px";
heart.style.left = x + "px";
document.body.appendChild(heart);
setTimeout(function() {
heart.remove();
},800);
}
</script>綜上所述，HTML愛心煙花特效是一種非常流行的動畫效果，可以使用CSS和JavaScript來制作。通過上述示例代碼的學習，我們可以輕松地實現這種特效，為網站增加更多的互動和趣味性。