雪花飘落动画效果
雪花素材:
效果图:
代码:
<!
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
>