html满屏飘爱心代码及效果
这是一个使用HTML和CSS实现的满屏飘爱心代码的例子。我们将创建一个动画效果，让爱心在屏幕中心上飘来飘去。
HTML代码：
<!DOCTYPE html> <html> <head> <link rel="stylesheet" type="text/css" href="styles.css"> </head> <body> <div class="heart"></div> </body> </html>
这里，我们创建了一个div元素并给它一个类名heart。然后我们链接到外部的CSS文件styles.css。
CSS代码 (styles.css)：
css
body, html {
height: 100%;
margin: 0;
display: flex;
align-items: center;
justify-content: center;
}
.heart {
position: absolute;
top: 50%;
left: 50%;
width: 20px;
height: 20px;
margin-top: -10px;
margin-left: -10px;
background-color: red;
border-radius: 50%;
animation: float 3s ease-in-out infinite;
}
@keyframes float {
0% { transform: translateY(0px); }
50% { transform: translateY(-20px); }
100% { transform: translateY(0px); }
}以上两段代码，放在一起的效果以下：
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="styles.css">
<style>
body, html {
height: 100%;
margin: 0;
display: flex;
align-items: center;
justify-content: center;
background: #FFC0CB;
}
.heart {
position: absolute;
top: 50%;
left: 50%;
width: 80px;
height: 80px;
margin-top: -10px;
margin-left: -10px;
background-color: red;
border-radius: 50%;
animation: float 3s ease-in-out infinite;
}
@keyframes float {
0% { transform: translateY(0px); }
50% { transform: translateY(-80px); }
100% { transform: translateY(20px); }
}
</style>
</head>
<body>
<img class="heart" src="https://oss.qunapu.com/upload/2023/08/20230806080139169128009919036.jpg">
</body>
</html>在CSS代码中，我们首先设置body和html元素的高度为100%，以确保全屏显示。然后我们使用display: flex，align-items: center和justify-content: center来将内容居中。
然后我们为.heart类设置样式。我们将位置设置为绝对位置，然后将其在屏幕中居中。我们设置宽度和高度为20px，并将其背景颜色设置为红色。border-radius: 50%表示将元素的形状变为圆形。
最后，我们创建了一个名为float的动画。这个动画将在3秒内将元素向上移动80px，然后回到原点，这个过程会无限次的重复。这是通过animation: float 3s ease-in-out infinite;来实现的。
截图效果以下：
