用HTML写一个动态的爱心树
时间: 2023-06-07 20:08:50 浏览: 44
好的,以下是用HTML写一个动态的爱心树的代码:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>动态爱心树</title>
<style>
body {
background-color: #252525;
}
#tree {
position: relative;
width: 100%;
height: 100%;
}
.heart {
position: absolute;
width: 50px;
height: 50px;
background-color: pink;
border-radius: 25px 25px 0 0;
transform: rotate(45deg);
}
.heart::before,
.heart::after {
content: "";
position: absolute;
background-color: pink;
}
.heart::before {
top: -25px;
left: 0;
width: 50px;
height: 50px;
border-radius: 25px 25px 0 0;
}
.heart::after {
top: 0;
left: -25px;
width: 50px;
height: 50px;
border-radius: 0 25px 0 0;
}
</style>
</head>
<body>
<div id="tree"></div>
<script>
function createHeart() {
var heart = document.createElement("div");
heart.className = "heart";
var x = Math.floor(Math.random() * window.innerWidth - 25);
var y = Math.floor(Math.random() * window.innerHeight - 25);
heart.style.top = y + "px";
heart.style.left = x + "px";
document.getElementById("tree").appendChild(heart);
setTimeout(function() {
heart.remove();
}, 5000);
}
setInterval(createHeart, 100);
</script>
</body>
</html>
这个动态爱心树会在屏幕上随机生成很多个爱心,效果比较可爱。如果您需要更详细的解释,请随时向我提出问题。