帮我写一个无数爱心滑落的html
时间: 2023-09-15 17:05:42 浏览: 71
### 回答1:
您好,我可以为您提供以下代码:
```
<!DOCTYPE html>
<html>
<head>
<style>
.heart {
position: absolute;
width: 50px;
height: 50px;
background-color: #ff69b4;
border-radius: 25px 25px 0px 0px;
transform: rotate(45deg);
top: -25px;
left: -25px;
}
.heart:before,
.heart:after {
content: "";
position: absolute;
width: 50px;
height: 50px;
background-color: #ff69b4;
border-radius: 25px 25px 0px 0px;
transform: rotate(45deg);
}
.heart:before {
top: -25px;
left: 25px;
}
.heart:after {
top: 25px;
left: -25px;
}
@keyframes drop {
0% {
transform: translateY(0);
}
100% {
transform: translateY(800px);
}
}
.heart-container {
position: relative;
animation: drop infinite alternate;
animation-duration: 5s;
}
</style>
</head>
<body>
<div class="heart-container">
<div class="heart"></div>
</div>
<div class="heart-container">
<div class="heart"></div>
</div>
<div class="heart-container">
<div class="heart"></div>
</div>
<!-- Add as many heart-container divs as you want -->
</body>
</html>
```
这段代码会使心形图案在页面上无限循环地滑落,每一个心形图案在5秒内滑落一次,如果您需要增加更多的爱心,请复制多个`<div class="heart-container">` 即可。
### 回答2:
当然可以帮您编写一个无数爱心滑落的HTML代码。以下是一个简单的示例:
```html
<!DOCTYPE html>
<html>
<head>
<style>
.heart {
position: absolute;
height: 20px;
width: 20px;
background-color: red;
transform: rotate(-45deg);
animation: fallingHearts 2s linear infinite;
}
@keyframes fallingHearts {
0% { transform: translateY(0); }
100% { transform: translateY(800px); }
}
</style>
</head>
<body>
<script>
// 创建一个无限循环的函数,用于创建爱心元素
function createFallingHearts() {
// 获取页面的宽度和高度
var screenWidth = window.innerWidth;
var screenHeight = window.innerHeight;
// 循环创建爱心
for (var i = 0; i < 100; i++) {
// 创建一个 div 元素
var heart = document.createElement('div');
// 添加一个类名
heart.className = 'heart';
// 设置位置随机
heart.style.left = Math.random() * screenWidth + 'px';
heart.style.top = Math.random() * screenHeight + 'px';
// 将爱心添加到页面中
document.body.appendChild(heart);
}
}
// 调用函数开始创建爱心
createFallingHearts();
</script>
</body>
</html>
```
这段代码会在页面上创建100个红色的爱心元素,并使它们向下飘落。您可以根据需要调整爱心的样式和数量。希望这能满足您的需求!
### 回答3:
当然可以!下面是一个简单的HTML代码示例,它会在页面上无数个爱心雪花飘落:
```html
<!DOCTYPE html>
<html>
<head>
<title>爱心滑落</title>
<style>
html, body {
margin: 0;
padding: 0;
height: 100%;
}
#container {
position: relative;
height: 100%;
}
.heart {
position: absolute;
height: 20px;
width: 20px;
background-color: red;
transform: rotate(45deg);
border-radius: 50%;
animation: fall 5s infinite;
}
@keyframes fall {
0% {
transform: translate(0, 0) rotate(45deg);
opacity: 1;
}
100% {
transform: translate(0, 1000px) rotate(45deg);
opacity: 0;
}
}
</style>
</head>
<body>
<div id="container"></div>
<script>
// 获取屏幕尺寸
var screenWidth = window.innerWidth;
var screenHeight = window.innerHeight;
// 创建爱心
function createHeart() {
var heart = document.createElement("div");
heart.className = "heart";
heart.style.left = Math.random() * screenWidth + "px";
document.getElementById("container").appendChild(heart);
// 移除已经飘过底部的爱心
setTimeout(function() {
heart.remove();
}, 5000);
}
// 每100毫秒创建一个爱心
setInterval(createHeart, 100);
</script>
</body>
</html>
```
将上述代码粘贴到一个HTML文件中并保存,然后在浏览器中打开该文件,你将看到无数个红色的爱心雪花在页面上飘落。调整浏览器窗口大小,爱心雪花将重新适应屏幕尺寸。希望你喜欢这个简单的爱心滑落效果!