最近学习了HTML的烟花代码，突然想到可以用它来表白。
<html>
<head>
<title>烟花表白</title>
<style>
/*定义烟花动画*/
@keyframes fireworks {
0% {
transform: scale(1);
opacity: 1;
filter: brightness(100%);
}
80% {
transform: scale(10);
opacity: 0;
filter: brightness(200%);
}
100% {
transform: scale(0);
filter: brightness(100%);
}
}
/*设置烟花粒子样式*/
.firework {
position: absolute;
width: 10px;
height: 10px;
border-radius: 50%;
background-color: #fff;
animation: fireworks ease-out infinite;
animation-duration: 2s;
transition-timing-function: ease-out;
}
/*调整颜色*/
.firework:nth-child(2n) {
background-color: #ffc107;
}
.firework:nth-child(3n) {
background-color: #e91e63;
}
/*定义点击事件*/
document.onclick = function (e) {
var firework = document.createElement('div');
firework.className = 'firework';
firework.style.left = e.clientX + 'px';
firework.style.top = e.clientY + 'px';
document.body.appendChild(firework);
setTimeout(function () {
firework.remove();
}, 2000);
};
</style>
</head>
<body>
<h1>烟花表白</h1>
<p>亲爱的，这是专门为你写的代码，点一下页面感受一下吧~</p>
</body>
</html>这个表白页面的代码包含了相应的CSS标签，不仅可以让页面变得更美观，还能够实现一些炫酷的动画效果，非常有趣。
亲爱的，希望你能够在点击页面的瞬间，感受到我的真心与初衷。虽然它只是一段简单的代码，但我想通过它来告诉你，我无限宠爱，永远陪伴。