用html5写一个爱心表白动态烟花的代码,爱心剧中可以看见全局效果
时间: 2024-12-19 10:26:45 浏览: 115
HTML5 和 CSS3 可以结合 JavaScript 制作动态的网页效果,比如爱心表白烟花。下面是一个简单的示例代码,创建了一个爱心形状的元素,并利用CSS3动画模拟烟花绽放的效果:
```html
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>爱心烟花</title>
<style>
.heart {
position: relative;
width: 200px;
height: 200px;
background-color: red;
border-radius: 50%;
transform: rotate(45deg);
animation: fireworks 3s infinite;
}
@keyframes fireworks {
0% { opacity: 1; transform: translateY(0); }
50% { opacity: 0.5; transform: translateY(-200px); }
100% { opacity: 1; transform: translateY(0); }
}
</style>
</head>
<body>
<div class="heart" id="love"></div>
<script>
// 如果你想在点击某个按钮或者满足特定条件时触发烟花特效
// document.getElementById('startButton').addEventListener('click', function() {
// var love = document.getElementById('love');
// love.style.animationPlayState = 'running';
// });
// 当页面加载完毕后再启动动画(全局效果)
window.onload = function() {
var love = document.getElementById('love');
love.style.animationPlayState = 'running';
};
</script>
</body>
</html>
```
在这个例子中,我们首先定义了一个`.heart`类用于创建爱心形状。然后通过JavaScript控制其`animation-play-state`属性,在页面加载完成后使其动起来。
阅读全文
相关推荐















