<!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>Balls Motions</title>
???<style>
???????* {
???????????margin: 0;
???????????padding: 0;
???????}
???????body {
???????????width: 100vw;
???????????height: 100vh;
???????????background-color: #999;
???????????/* 33~CC, 51~204 ?*/
???????}
???????.ball {
???????????width: 100px;
???????????height: 100px;
???????????background: #fff;
???????????border-radius: 50%;
???????????/* border-radius: 100% 0 100% 0; */
???????????position: fixed;
???????????/* transition: all .1s; */
???????????/* animation: turn 12s infinite linear; */
???????}
???????@keyframes turn {
???????????to {
???????????????transform: rotate(360deg);
???????????}
???????}
???????@keyframes aturn {
???????????to {
???????????????transform: rotate(-360deg);
???????????}
???????}
???</style>
</head>
<body>
???<div id="desktop"></div>
???<script>
???????// 屏幕宽高
???????var maxw = window.innerWidth;
???????var maxh = window.innerHeight;
???????// 动态取屏幕宽高值
???????function winfo() {
???????????maxw = window.innerWidth;
???????????maxh = window.innerHeight;
???????}
???????window.onresize = winfo;
???????// 随机函数
???????function rand(a, b) {
???????????return Math.round(Math.random() * (b - a) + a);
???????}
???????var max = 200;
???????document.querySelector(‘#desktop‘).innerHTML =
???????????(new Array(max + 1)).join(‘<div class="ball"></div>‘);
???????var objs = document.querySelectorAll(‘.ball‘);
???????var balls = [];
???????objs.forEach(function (el) {
???????????var d = rand(1, 2);
???????????balls.push({
???????????????obj: el,
???????????????d: d,
???????????????x: rand(0, maxw - d),
???????????????y: -d,
???????????????dx: 1, //rand(0, 1) ? 1 : -1,
???????????????dy: 1,
???????????????sx: rand(1, 2),
???????????????sy: rand(5, 20),
???????????????bg:
???????????????"rgba(" +
???????????????rand(51, 204) + ", " +
???????????????rand(51, 204) + ", " +
???????????????rand(51, 204) + ", " +
???????????????rand(30, 80) / 100 + ")"
???????????});
???????????// d = rand(0, 1) ? "" : "a";
???????????// el.style.animation =
???????????// ????d + "turn " + rand(10, 20) + "s infinite linear";
???????});
???????console.log("all balls:", balls);
???????// 运动
???????function motion() {
???????????//balls.forEach(function (el, index, arr) {
???????????for (var i = 0; i < balls.length; i++) {
???????????????var rs = rand(1, 3);
???????????????var rd = rand(-1, 1);
???????????????var el = balls[i];
???????????????// el.x += el.dx * el.sx;
???????????????el.x += rd * rs;
???????????????el.y += el.dy * el.sy;
???????????????if (el.x > maxw && el.dx > 0) {
???????????????????el.x = -el.d;
???????????????????// el.dy = rand(0, 1) ? 1 : -1;
???????????????}
???????????????if (el.x < -100 && el.dx < 0) {
???????????????????el.x = maxw;
???????????????}
???????????????if (el.y > maxh) {
???????????????????el.y = -el.d;
???????????????????// el.dx = rand(0, 1) ? 1 : -1;
???????????????????el.sy = rand(10, 30);
???????????????????// el.obj.style.display = "none";
???????????????}
???????????????// 设置外观
???????????????el.obj.style.width = el.d + ‘px‘;
???????????????el.obj.style.height = el.d * 5 + ‘px‘;
???????????????el.obj.style.left = el.x + ‘px‘;
???????????????el.obj.style.top = el.y + ‘px‘;
???????????}
???????????// });
???????????// 预约下次
???????????setTimeout(motion, 50);
???????}
???????motion();
???</script>
</body>
</html>
小图形下落,类似雪花飘落,原生js
原文地址：http://www.cnblogs.com/AgilityJin/p/7623721.html