Html5是一種用于網頁開發的語言，可以為網頁增加更加豐富的效果和交互性。其中滿屏飄愛心代碼是使用HTML5非常流行的一種網頁效果，被廣泛用于情人節、節日慶祝等場合的網頁制作。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>滿屏飄愛心代碼</title>
<style>
.heartbg {
position: fixed;
top: 0;
left: 0;
bottom: 0;
right: 0;
overflow: hidden;
z-index: -1;
}
.heart {
position: absolute;
width: 30px;
height: 30px;
background: url('http://akwww.goujianwu.com/uploads/article/20180208/278013.gif') no-repeat;
background-size:30px 30px;
animation: fly 7s ease-in-out infinite;
-webkit-animation: fly 7s ease-in-out infinite;
}
.heart:nth-of-type(1) {
left: 5%;
animation-delay: 0.5s;
-webkit-animation-delay: 0.5s;
transform: scale(0.4);
-webkit-transform: scale(0.4);
}
.heart:nth-of-type(2) {
left: 15%;
animation-delay: 2s;
-webkit-animation-delay: 2s;
transform: scale(0.6);
-webkit-transform: scale(0.6);
}
.heart:nth-of-type(3) {
left: 26%;
animation-delay: 4.5s;
-webkit-animation-delay: 4.5s;
transform: scale(0.8);
-webkit-transform: scale(0.8);
}
.heart:nth-of-type(4) {
left: 38%;
animation-delay: 3s;
-webkit-animation-delay: 3s;
transform: scale(0.5);
-webkit-transform: scale(0.5);
}
.heart:nth-of-type(5) {
left: 50%;
animation-delay: 2.5s;
-webkit-animation-delay: 2.5s;
transform: scale(0.6);
-webkit-transform: scale(0.6);
}
.heart:nth-of-type(6) {
left: 62%;
animation-delay: 5.5s;
-webkit-animation-delay: 5.5s;
transform: scale(0.4);
-webkit-transform: scale(0.4);
}
.heart:nth-of-type(7) {
left: 73%;
animation-delay: 1s;
-webkit-animation-delay: 1s;
transform: scale(0.8);
-webkit-transform: scale(0.8);
}
.heart:nth-of-type(8) {
left: 85%;
animation-delay: 3.5s;
-webkit-animation-delay: 3.5s;
transform: scale(0.5);
-webkit-transform: scale(0.5);
}
@keyframes fly {
0% {
opacity: 1;
transform: translateY(0);
}
100% {
opacity: 0;
transform: translateY(-1000px) rotate(720deg);
}
}
@-webkit-keyframes fly {
0% {
opacity: 1;
transform: translateY(0);
}
100% {
opacity: 0;
transform: translateY(-1000px) rotate(720deg);
}
}
</style>
</head>
<body>
<div class="heartbg">
<div class="heart"></div>
<div class="heart"></div>
<div class="heart"></div>
<div class="heart"></div>
<div class="heart"></div>
<div class="heart"></div>
<div class="heart"></div>
<div class="heart"></div>
</div>
</body>
</html>以上是滿屏飄愛心的HTML5代碼，通過CSS實現了不同大小和位置的愛心浮動效果，給人以浪漫的感受。