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随机生成花朵的位置和颜色，让花朵从屏幕顶部飘落至底部，营造出如花雨般的效果。将代码嵌入到网页中，就可以让访问者在欣赏美丽花雨的同时，体验特别的视觉效果。