html显示满屏的玫瑰花
时间: 2023-11-16 21:10:31 浏览: 114
玫瑰花满屏
以下是一段HTML代码,可以让玫瑰花在屏幕上满屏显示:
```html
<!DOCTYPE html>
<html>
<head>
<title>满屏玫瑰花</title>
<style>
body {
background-color: black;
overflow: hidden;
}
.rose {
position: absolute;
animation: rose 10s linear infinite;
}
@keyframes rose {
from {
transform: translate(0, 0) rotate(0deg);
}
to {
transform: translate(-200%, 100vh) rotate(720deg);
}
}
</style>
</head>
<body>
<script>
for (var i = 0; i < 200; i++) {
var rose = document.createElement("div");
rose.className = "rose";
rose.style.top = Math.floor(Math.random() * 100) + "vh";
rose.style.left = Math.floor(Math.random() * 100) + "vw";
document.body.appendChild(rose);
}
</script>
</body>
</html>
```
这段代码使用了CSS动画和JavaScript创建了200个玫瑰花,让它们在屏幕上满屏飘落。将代码复制到HTML文件中,保存并打开即可看到效果。
阅读全文