HTML玫瑰花下落代碼
<!DOCTYPE html>
<html>
<head>
<title>玫瑰花下落</title>
<style>
body {
overflow: hidden;
background-color: black;
}
.flower {
position: absolute;
z-index: 99999;
background-image: url("https://i.imgur.com/Lwjj0SC.png");
width: 50px;
height: 50px;
background-size: cover;
animation: fall 25s ease-in-out forwards;
transform-origin: 50% 50%;
}
@keyframes fall {
0% {
transform: translateY(-100px) rotate(0);
}
100% {
transform: translateY(100vh) rotate(720deg);
opacity: 0;
}
}
</style>
</head>
<body>
<script>
let colors = ["pink", "red", "yellow", "white"];
let screenWidth = window.innerWidth;
let screenHeight = window.innerHeight;
let numOfFlowers = Math.floor(screenWidth / 50);
let flowers = [];
for(let i = 0; i < numOfFlowers; i++) {
let flower = document.createElement("div");
let randomX = Math.floor(Math.random() * screenWidth);
let randomY = Math.floor(Math.random() * screenHeight);
let randomColor = colors[Math.floor(Math.random() * colors.length)];
flower.classList.add("flower");
flower.style.top = randomY + "px";
flower.style.left = randomX + "px";
flower.style.filter = "hue-rotate(" + Math.random() * 360 + "deg)";
flower.style.backgroundImage = "url('https://i.imgur.com/" + randomColor + ".png')";
document.body.appendChild(flower);
}
</script>
</body>
</html>這段HTML代碼可以制作一個玫瑰花下落的效果。利用CSS動畫和JavaScript隨機生成花朵的位置和顏色，讓花朵從屏幕頂部飄落至底部，營造出如花雨般的效果。將代碼嵌入到網頁中，就可以讓訪問者在欣賞美麗花雨的同時，體驗特別的視覺效果。