• 当前标签:雪花下落

程序开发 H5学习之制作雪花下落动画

效果如上,也可以把雪花图片换成毛爷爷的,就成了下面这样 哈哈,是不是很好玩啊! 下面是代码: <!DOCTYPE html> <html> <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> body{ width: 100%; height: 100%; background-color: black; /*隐藏滚动条*/ overflow: hidden; } </style> </head> <body> <script> function Flake(){ // 每个载入浏览器的HTML文档都会成为document对象 // document对象使我们可以从脚本访问HTML页面中的所有元素 var r = document.createElement('img') r.src = 'flake.png' r.style.position = 'absolute' // 获取浏览器可见区域的宽和高 var w = document.documentElement.clientWidth var h = document.documentElement.clientHeight // 雪花随机产生的位置 var top = h*Math.random() var left = w*Math.random() // 以下三句代码可以确定一朵雪花在浏览器的位置 r.style.position = 'absolute' r.style.top = top + 'px' r.style.left = left + 'px' // 雪花的图片大小是随机的 scale缩放 r.style.transform = 'scale('+ Math.random() / 2 +' )' // 把创建的新元素img拼接到body上 document.body.appendChild(r) function down(){ top = top + Math.random()*5 left = left +Math.random()*5 if(top > h){ top = -100 } if(left >w ){ left = -100 } r.style.top = top + 'px' r.style.left = left + 'px' } setInterval(down,50) } for(var i = 0 ; i<100 ; i++){ new Flake() } new Flake() </script> </body> </html> 素材下载:2017-03-10 雪花下落

2017-03-10 22:01:06 52 0 0
阅读详情
  • 1
前往