如果你想在網頁上實現滿屏飄愛心效果，那就需要先寫好相應的HTML代碼。這個過程可能對于初學者來說有一定的難度，但是只要你按照正確的步驟操作，就能夠很容易地達到目標。
首先，在HTML文檔中添加如下代碼段：
<!DOCTYPE html> <html> <head> <title>滿屏飄愛心</title> <meta charset="utf-8"> <link rel="stylesheet" type="text/css" href="style.css"> <script src="jquery-3.6.0.js"></script> </head> <body> <div class="heart-container"> <div class="heart"></div> </div> </body> </html>
上面的代碼包含了一個“heart-container”類和一個“heart”類。下一步是用CSS樣式表為這些類添加樣式。
.heart-container {
position: relative;
height: 100vh;
}
.heart {
position: absolute;
top: 50%;
left: 50%;
width: 10px;
height: 10px;
background-color: red;
transform: translate(-50%, -50%) rotate(45deg);
border-radius: 50%;
animation: heart 1s infinite ease-in-out;
}
@keyframes heart {
0% {
opacity: 1;
transform: translate(-50%, -50%) rotate(45deg) scale(1);
}
50% {
opacity: 0;
transform: translate(-50%, -50%) rotate(45deg) scale(0.7);
}
100% {
opacity: 1;
transform: translate(-50%, -50%) rotate(45deg) scale(1);
}
}添加CSS樣式后，用JavaScript代碼添加愛心飄落的動畫效果：
$(function() {
for (var i = 0; i < 10; i++) {
var left = Math.random() * $(window).width() - 100;
var top = Math.random() * $(window).height() - 100;
$('.heart-container').append('<div class="heart"></div>');
$('.heart:last').css({'left': left+'px', 'top': top+'px'});
}
});以上步驟完成后，你就可以在網頁上看到滿屏飄愛心的效果了。如果想要把代碼復制到自己的網頁中，記得把相關文件的路徑改成你自己網站上的路徑。