帮我用HTML写一段撒花的代码
时间: 2023-04-10 07:03:14 浏览: 66
当用户点击按钮时,页面上会出现彩色的花瓣飘落,如下所示:
```html
<!DOCTYPE html>
<html>
<head>
<title>撒花</title>
<style>
body {
background-color: #f2f2f2;
}
#btn {
padding: 10px 20px;
background-color: #ff69b4;
color: #fff;
border: none;
border-radius: 5px;
font-size: 16px;
cursor: pointer;
}
#container {
position: relative;
height: 500px;
overflow: hidden;
}
.flower {
position: absolute;
width: 20px;
height: 20px;
background-color: #ff69b4;
border-radius: 50%;
animation: fall 5s linear infinite;
}
@keyframes fall {
0% {
top: -20px;
opacity: 1;
transform: scale(1);
}
100% {
top: 500px;
opacity: 0;
transform: scale(0.2);
}
}
</style>
</head>
<body>
<div id="container"></div>
<button id="btn">撒花</button>
<script>
var container = document.getElementById('container');
var btn = document.getElementById('btn');
btn.onclick = function() {
for (var i = 0; i < 50; i++) {
var flower = document.createElement('div');
flower.className = 'flower';
flower.style.left = Math.random() * container.offsetWidth + 'px';
container.appendChild(flower);
}
}
</script>
</body>
</html>
```