HTML 玫瑰雨效果可以為網頁添加一些浪漫的氛圍，讓網頁更加生動活潑。下面是一個 HTML 玫瑰雨的代碼示例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>HTML Rose Rain</title>
<style type="text/css">
body {
/* 背景色 */
background-color: #000;
}
#container {
/* 容器位置 */
position: absolute;
top: 0px;
left: 0px;
width: 100%;
height: 100%;
z-index: -1;
}
.rose {
/* 玫瑰圖片 */
position: absolute;
background: url(http://www.xxxxx.com/images/rose.png) no-repeat;
background-size: contain;
/* 圖片大小 */
width: 100px;
height: 100px;
/* 延時動畫時間 */
animation: roseRain 15s linear infinite;
-webkit-animation: roseRain 15s linear infinite;
}
/* 動畫關鍵幀 */
@keyframes roseRain {
from {
top: -100px;
opacity: 1;
}
to {
top: 100%;
opacity: 0;
}
}
/* Safari瀏覽器動畫關鍵幀 */
@-webkit-keyframes roseRain {
from {
top: -100px;
opacity: 1;
}
to {
top: 100%;
opacity: 0;
}
}
</style>
</head>
<body>
<div id="container">
<?php
//生成100朵玫瑰花
for($i=0;$i<100;$i++){
$left = rand(0,100);
$top = rand(0,100);
echo '<div class="rose" style="left:'.$left.'%;top:'.$top.'%;"></div>';
}
?>
</div>
</body>
</html>上面的代碼使用了 CSS3 的動畫技術，讓一張張的玫瑰花從頁面頂部飄落到底部，并且在下落的過程中逐漸變得透明，最終消失在頁面底部。頁面上一共飄落了 100 朵玫瑰花，它們的位置是隨機生成的，增加了頁面的視覺效果。