雪花飘落动画效果

雪花飘落动画效果

雪花素材：

效果图：

代码：

<! DOCTYPE html >

< html lang = "en" >

< head >

< meta charset = "UTF-8" >

< meta name = "viewport" content = "width=device-width, initial-scale=1.0" >

< meta http-equiv = "X-UA-Compatible" content = "ie=edge" >

< title > 雪花 </ title >

< style >

html {

height : 100% ;

}

body {

margin : 0px ;

background-color : black;

height : 100% ;

/* 隐藏超出屏幕部分 */

overflow : hidden;

}

img {

position : absolute;

left : 100px ;

top : 100px ;

}

< / style >

</ head >

< body >

< script >

function showSnow() {

// 获取img标签元素

var img = document.createElement( 'img' )

// 把img的src属性设置为flake.png

img.src = 'snow.png' ;

// document.body指body标签，appendChild追加子标签img

document.body.appendChild(img)

// 获取客户端的宽和高

var width = document.body.clientWidth

var height = document.body.clientHeight

var l = Math.random() * width;

var t = Math.random() * height;

img.style.position = 'absolute' ;

img.style.top = t + 'px' ;

img.style.left = l + 'px' ;

// 设置雪花大小

// img.style.width = Math.random() * 50 + 'px';

img.style.transform = 'scale(' + Math.random() / 2 + ')' ;

console.log(height);

console.log(t);

function snowDown() {

l += Math.random() * 10 ;

t += Math.random() * 10 ;

if (l > width) {

l = - 100 ;

}

if (t > height) {

t = - 100 ;

}

img.style.left = l + 'px' ;

img.style.top = t + 'px' ;

}

// 每隔50毫秒执行一次snowDown移动方法

setInterval(snowDown, 50 );

}

// for循环showSnow(),创建50个雪花

for ( var i = 0 ; i < 50 ; i++) {

showSnow();

}

< / script >

</ body >

</ html >