满屏爱心飘落代码html
时间: 2023-07-10 16:41:27 浏览: 186
以下是满屏爱心飘落的 HTML 代码:
```html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>满屏爱心飘落</title>
<style>
body {
background-color: black;
}
.heart {
position: absolute;
display: block;
background-color: #f00;
width: 20px;
height: 20px;
transform: rotate(45deg);
animation: heart 2s infinite ease-in-out;
box-shadow: 0 0 10px #f00;
}
@keyframes heart {
0% {
transform: rotate(45deg) scale(1);
}
25% {
transform: rotate(45deg) scale(0.8);
}
50% {
transform: rotate(45deg) scale(1);
}
75% {
transform: rotate(45deg) scale(0.8);
}
100% {
transform: rotate(45deg) scale(1);
}
}
</style>
</head>
<body>
<script>
for (var i = 0; i < 100; i++) {
var heart = document.createElement('div');
heart.className = 'heart';
heart.style.left = Math.floor(Math.random() * window.innerWidth) + 'px';
heart.style.top = Math.floor(Math.random() * window.innerHeight) + 'px';
document.body.appendChild(heart);
}
</script>
</body>
</html>
```
你可以将上述代码复制到你的 HTML 文件中,并在浏览器中打开以查看效果。注意,这段代码会在页面上创建 100 个红色爱心,随机分布在屏幕中。