帮我写一个无数爱心在屏幕中随机运动的html
时间: 2023-03-01 07:40:52 浏览: 66
下面是一个使用HTML, CSS, JavaScript创建无数爱心在屏幕中随机运动的代码:
```
<html>
<head>
<style>
.heart {
width: 50px;
height: 50px;
background-color: #ff1493;
border-radius: 25px 25px 0 0;
transform: rotate(45deg);
position: absolute;
top: calc(50% - 25px);
left: calc(50% - 25px);
}
.heart:before,
.heart:after {
content: "";
width: 25px;
height: 25px;
background-color: #ff1493;
border-radius: 25px 0 0 25px;
position: absolute;
left: 25px;
}
.heart:before {
top: -25px;
}
.heart:after {
top: 25px;
}
</style>
</head>
<body>
<div id="container"></div>
<script>
const container = document.getElementById("container");
for (let i = 0; i < 50; i++) {
const heart = document.createElement("div");
heart.classList.add("heart");
heart.style.top = Math.random() * 100 + "vh";
heart.style.left = Math.random() * 100 + "vw";
container.appendChild(heart);
}
</script>
</body>
</html>
```
这段代码使用了HTML, CSS, JavaScript来创建爱心的形状,并将其随机放置在容器中。通过循环创建多个爱心,实现无数爱心在屏幕中随机运动的效果。