-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathjs-snow-2-web.html
52 lines (48 loc) · 1.46 KB
/
js-snow-2-web.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
body { background: #232123; }
@keyframes mysnow {
0% { bottom: 100%; opacity: 0; }
50% { opacity: 1; transform: rotate(720deg);}
100% { transform: rotate(0deg); opacity: 0; bottom: 0%;}
}
.container { position: fixed; }
.pic { position: absolute; opacity: 0; animation: mysnow 5s;height: 30px; }
</style>
</head>
<body>
<div id="snowFlow" >
</div>
</body>
<script type="text/javascript">
window.onload=function(){
// snowFlow();
//innerHeight是Chorom的？clientWidth是IE的
function snowFlow(left,height,src){
var container=document.createElement('div');
var pic=document.createElement('img');
var snowFlow=document.getElementById('snowFlow');
pic.className='pic';
container.className='container';
snowFlow.appendChild(container);
container.appendChild(pic);
container.style.left=left+'px';
container.style.height=height+'px';
pic.src=src;
setTimeout(function(){
snowFlow.removeChild(container);
},5000);
}
setInterval(function(){
var left=Math.random()*window.innerWidth;
var height=Math.random()*window.innerHeight;
var src = './images/yinfu.png';
snowFlow(left,height,src);
},500)
}
</script>
</html>