html表白爱心代码
时间: 2024-01-02 17:22:58 浏览: 42
以下是一种基于JavaScript实现的HTML表白爱心代码:
```html
<!DOCTYPE html>
<html>
<head>
<title>表白爱心代码</title>
<style>
body {
background-color: black;
}
#heart {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 100px;
height: 100px;
background-color: red;
border-radius: 50%;
animation: heartbeat 1s infinite;
}
@keyframes heartbeat {
0% {
transform: scale(1);
}
50% {
transform: scale(1.2);
}
100% {
transform: scale(1);
}
}
</style>
</head>
<body>
<div id="heart"></div>
<script>
// 创建爱心元素
function createHeart() {
const heart = document.createElement("div");
heart.classList.add("heart");
return heart;
}
// 随机生成爱心位置
function randomPosition() {
const position = {
x: Math.random() * window.innerWidth,
y: Math.random() * window.innerHeight
};
return position;
}
// 添加爱心到页面
function addHeart() {
const heart = createHeart();
const position = randomPosition();
heart.style.left = position.x + "px";
heart.style.top = position.y + "px";
document.body.appendChild(heart);
}
// 定时添加爱心
setInterval(addHeart, 500);
</script>
</body>
</html>
```
这段代码会在页面中生成一个红色的爱心,并且会定时随机生成更多的爱心。爱心会以心跳的动画效果呈现。你可以将这段代码保存为一个HTML文件,然后在浏览器中打开该文件,即可看到表白爱心效果。