使用js实现雪花飘落效果,话不多说直接上代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>snow</title>
<style>
body,html{
margin: 0;
padding: 0;
overflow: hidden;
height: 100%;
background: black;
}
.snow{
background: white;
position: absolute;
width: 20px;
height: 20px;
border-radius: 50%;
}
</style>
</head>
<body>
<script>
var windowWidth = window.screen.width;
var windowHeight = window.screen.height;
function createSnow(){
var left = 0;
var top = 0;
var left_random = Math.random() * windowWidth;
var top_random = Math.random()* windowHeight;
var div = document.createElement('div');
div.className = 'snow';
div.style.transform = 'scale('+(Math.random())+')'
document.body.appendChild(div);
setInterval(function () {
div.style.left = left_random + left +'px';
div.style.top = top_random + top +'px'
left += 0.2;
top += 0.2;
if(left_random + left >= windowWidth){
left_random = Math.random();
left = 0;
}
if(top_random + top >= windowHeight){
top_random = Math.random();
top = 0;
}
},10)
}
for(var i = 0 ; i < 200 ; i++){
createSnow()
}
</script>
</body>
</html>
实现逻辑其实很简单,动态创建若干个div设置其样式变成雪花,通过setInterval定时器控制雪花移动,当雪花跑到屏幕外面重新让雪花的left或者top为0,使雪花重新回到最左或者最上面的位置,从而实现。
效果预览: