满屏爱心的html代码
时间: 2023-08-24 10:04:45 浏览: 246
以下是一个简单的示例代码,可以在网页上实现满屏爱心效果:
```html
<!DOCTYPE html>
<html>
<head>
<title>满屏爱心</title>
<style>
body {
overflow: hidden;
margin: 0;
padding: 0;
background-color: black;
}
.heart {
position: absolute;
width: 100px;
height: 100px;
background-color: red;
transform: rotate(45deg);
animation: heart 2s infinite;
}
@keyframes heart {
0% {
transform: rotate(45deg) scale(1);
opacity: 1;
}
50% {
transform: rotate(45deg) scale(0.7);
opacity: 0.7;
}
100% {
transform: rotate(45deg) scale(1);
opacity: 1;
}
}
</style>
</head>
<body>
<script>
function createHeart() {
const heart = document.createElement('div');
heart.classList.add('heart');
heart.style.left = Math.random() * 100 + 'vw';
heart.style.animationDuration = Math.random() * 2 + 1 + 's';
heart.innerText = '❤';
document.body.appendChild(heart);
setTimeout(() => {
heart.remove();
}, 3000);
}
setInterval(createHeart, 300);
</script>
</body>
</html>
```
您可以将此代码复制到一个 HTML 文件中,然后在浏览器中打开该文件,即可看到满屏爱心效果。