帮我写一个 js樱花代码
时间: 2023-08-20 08:23:27 浏览: 32
以下是一个简单的 JavaScript 樱花代码,可以在网页上运行:
```html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>樱花</title>
<style>
#sakura {
position: fixed;
top: -50px;
left: 0;
width: 20px;
height: 20px;
background: pink;
border-radius: 50%;
opacity: 0.8;
animation: falling 5s linear infinite;
}
@keyframes falling {
0% {
transform: translate(0, 0);
}
100% {
transform: translate(500px, 1000px) rotate(360deg);
}
}
</style>
</head>
<body>
<div id="sakura"></div>
<script>
function createSakura() {
var sakura = document.createElement("div");
sakura.style.left = Math.random() * window.innerWidth + "px";
sakura.style.animationDuration = Math.random() * 5 + 5 + "s";
sakura.style.fontSize = Math.random() * 10 + 10 + "px";
sakura.innerHTML = "❀";
sakura.classList.add("sakura");
document.body.appendChild(sakura);
setTimeout(function() {
document.body.removeChild(sakura);
}, sakura.style.animationDuration.replace("s", "") * 1000);
}
setInterval(createSakura, 100);
</script>
</body>
</html>
```
这个代码会在网页上不断地飘落樱花,并随机生成大小、颜色和动画时间。你可以在浏览器中打开该 HTML 文件来查看效果。
相关推荐
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![py](https://img-home.csdnimg.cn/images/20210720083646.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![rar](https://img-home.csdnimg.cn/images/20210720083606.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![7z](https://img-home.csdnimg.cn/images/20210720083312.png)
![rar](https://img-home.csdnimg.cn/images/20210720083606.png)
![sb3](https://img-home.csdnimg.cn/images/20210720083646.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)