如果你想在你的網(wǎng)站上加入一些漂亮的節(jié)日氣氛，可以使用HTML漂浮雪花代碼。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>漂浮雪花代碼</title>
<style>
body{
background-color: #000;
}
.snowflake{
position: fixed;
display: block;
top: -10px;
animation: snowfall 5s linear infinite;
-webkit-animation: snowfall 5s linear infinite;
}
@keyframes snowfall{
0%{
top: -10px;
}
100%{
top: 100%;
}
}
@-webkit-keyframes snowfall{
0%{
top: -10px;
}
100%{
top: 100%;
}
}
</style>
</head>
<body>
<script>
for(i=0;i<100;i++){
var snowflake = document.createElement("div");
snowflake.setAttribute("class", "snowflake");
snowflake.innerHTML = "×";
snowflake.style.color = "#fff";
snowflake.style.fontSize = Math.floor(Math.random()*30+10) + "px";
snowflake.style.left = Math.floor(Math.random()*(window.innerWidth-30)) + "px";
document.body.appendChild(snowflake);
}
</script>
</body>
</html>上面的代碼有幾個關(guān)鍵點：
- 使用了CSS中的Animation技術(shù)來使雪花飄落
- 在body標(biāo)簽中使用了