HTML彩虹雨代碼是一種非常有趣的網(wǎng)頁(yè)效果。彩虹雨效果可以讓整個(gè)網(wǎng)頁(yè)看起來非常活潑和有趣。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>彩虹雨效果</title>
<style>
body {
background-color: black;
}
.drop {
position: absolute;
height: 50px;
width: 1px;
background-color: white;
animation: fall 1s linear infinite;
animation-delay: calc(80ms * var(--i));
}
@keyframes fall {
from {
transform: translateY(-50px) rotate(0deg);
}
to {
transform: translateY(100vh) rotate(360deg);
}
}
</style>
</head>
<body>
<script>
for (let i = 0; i < 100; i++) {
let drop = document.createElement("div");
drop.classList.add("drop");
drop.style.left = Math.random() * window.innerWidth + "px";
drop.style.setProperty("--i", i);
document.body.appendChild(drop);
}
</script>
</body>
</html>這段代碼使用了CSS動(dòng)畫來創(chuàng)建多個(gè)不同的水滴效果，它們會(huì)從頁(yè)面頂部隨機(jī)位置落下來，然后以旋轉(zhuǎn)的方式飄落至頁(yè)面底部，從而形成了彩虹雨的效果。
想要添加這個(gè)效果到自己的網(wǎng)頁(yè)中，只需要將上述代碼復(fù)制到你的HTML文件中即可。同時(shí)，可以根據(jù)自己的需求修改CSS屬性，從而達(dá)到更好的效果。