这可能是再备考期间比较有乐趣的事情了,尤其在这疫情期间,做点有意思的东西,娱乐一下下。
一个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>
没法上传视频动态,只能截图 哈哈