html用烟花特效显示“姐姐我错啦,原谅我好不好”
时间: 2023-12-26 18:07:14 浏览: 23
以下是一个示例的HTML代码,可以用烟花特效显示“姐姐我错啦,原谅我好不好”:
```html
<!DOCTYPE html>
<html>
<head>
<title>烟花效果</title>
<style type="text/css">
body {
background-color: black;
}
.firework {
position: absolute;
border-radius: 50%;
background-color: #fff;
animation: explode 1s ease-out forwards;
}
@keyframes explode {
0% {
transform: scale(0);
}
100% {
transform: scale(15);
opacity: 0;
}
}
.message {
position: absolute;
font-size: 40px;
color: white;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
animation: fade 3s ease-out forwards;
}
@keyframes fade {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
</style>
</head>
<body>
<div class="message">姐姐我错啦,原谅我好不好</div>
<script type="text/javascript">
// 创建烟花
function createFirework() {
var firework = document.createElement('div');
firework.className = 'firework';
firework.style.left = Math.random() * 100 + '%';
firework.style.top = Math.random() * 100 + '%';
document.body.appendChild(firework);
setTimeout(function() {
firework.parentNode.removeChild(firework);
}, 1000);
}
// 定时创建烟花
setInterval(createFirework, 500);
</script>
</body>
</html>
```
这段代码会在页面中央显示一个白色的文字“姐姐我错啦,原谅我好不好”,并且会随机创建白色的烟花特效。可以在样式中调整文字的颜色、大小、位置等属性,也可以在JavaScript中调整烟花的创建间隔、持续时间等参数。