這可能是再備考期間比較有樂趣的事情了，尤其在這疫情期間，做點有意思的東西，娛樂一下下。
一個java的落雪效果還挺美的 哈哈哈哈。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>落雪效果</title>
<style>
#box {
width: 1120px;
height: 630px;
background-image: url("snow3.jpg");
margin: 50px auto;
/ / 相對定位，爲了給雪花的絕對定位提供定位的參照區域
position: relative;
}
#box div {
/*position: absolute; !*絕對定位*!*/
/*color: white;*/
/*font-size: 50px;*/
/*font-weight: bold;*/
/*text-shadow: 0 0 10px white;*/
position: absolute;
width: 10px;
height: 10px;
background: radial-gradient(white, transparent);
border-radius: 50%;
}
</style>
</head>
<body>
<div id="box">
<script>
var box = document.getElementById('box');
setInterval(snow, 80);
function snow() {
/*生成一個雪花，並開始放在合適的位置，
並開始下落，直到落出容器區域，自我移除。*/
var n = -500;
// 1.生成一個雪花
var f = document.createElement('div');
//生成一個隨機數，表示雪花距離我們眼睛的距離
var juli = Math.random() * 1000;
// 2.將雪花插入到頁面中
box.appendChild(f);
// 2.5 依照距離，動態改變雪花的狀態
f.style.width = Math.abs(juli * 0.045 - 45) + 5 + 'px';
f.style.height = Math.abs(juli * 0.045 - 45) + 5 + 'px';
f.style.opacity = Math.abs(juli * 0.0007 - 0.7) + 0.4;
// 3.將雪花放在合適的位置
f.style.left = Math.floor(Math.random() * 1120) + 'px';
f.style.top = n + 'px';
// 4.讓雪花下落
down();
function down() {
if (n < 630) {
//繼續下路
n+=Math.abs(juli * 0.009 - 9) + 1;
f.style.top = n + 'px';
requestAnimationFrame(down);
} else {
//自我消失
f.remove();
}
}
}
</script>
</div>
</body>
</html>
沒法上傳視頻動態，只能截圖 哈哈