生成一个动态爱心的网页
时间: 2023-05-13 15:06:50 浏览: 134
程序员浪漫-浪漫爱心代码(附赠源码html)
可以使用 HTML、CSS 和 JavaScript 来生成一个动态爱心的网页。以下是一个简单的示例代码:
```html
<!DOCTYPE html>
<html>
<head>
<title>动态爱心</title>
<style>
body {
background-color: #f5f5f5;
}
.heart {
position: absolute;
width: 100px;
height: 90px;
transform: rotate(-45deg);
background-color: #ff6b6b;
animation: heartbeat 1s ease-in-out infinite;
}
.heart::before,
.heart::after {
content: "";
position: absolute;
background-color: #ff6b6b;
border-radius: 50px 50px 0 0;
}
.heart::before {
top: 0;
left: 50px;
width: 50px;
height: 50px;
}
.heart::after {
top: -50px;
left: 0;
width: 50px;
height: 50px;
}
@keyframes heartbeat {
0% {
transform: scale(1);
}
50% {
transform: scale(1.1);
}
100% {
transform: scale(1);
}
}
</style>
</head>
<body>
<div class="heart"></div>
<script>
// 生成随机位置的爱心
function createHeart() {
var heart = document.createElement("div");
heart.className = "heart";
heart.style.top = Math.random() * 100 + "%";
heart.style.left = Math.random() * 100 + "%";
document.body.appendChild(heart);
setTimeout(function() {
heart.remove();
}, 5000);
}
// 定时生成爱心
setInterval(createHeart, 500);
</script>
</body>
</html>
```
这段代码会在页面上生成一个动态的红色爱心,每隔 0.5 秒会随机生成一个新的爱心,爱心会在 5 秒后自动消失。
阅读全文