这个也是仿写别人的, 只是把 box-shadow 部分放入 JS 部分生成出来.
html 代码
- <!DOCTYPE HTML>
- <HTML lang="zh">
- <head>
- <meta charset="UTF-8">
- <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
- <meta name="viewport" content="width=device-width, initial-scale=1.0">
- <title>
- </title>
- <style type="text/CSS">
- HTML, body { height: 100%; overflow: hidden; } body { width: 100%; height:100%;
- background: #000; background-size: 100%; perspective: 500px; } .stars {
- position: absolute; top: 50%; left: 50%; width: 4px; height:4px; -webkit-border-radius:50%;
- -moz-border-radius:50%; border-radius:50%; animation: fly 2s linear infinite;
- transform-style: preserve-3d; } .stars:before, .stars:after { content:
- ""; position: absolute; width: inherit; height: inherit; box-shadow: inherit;
- } .stars:before { transform: translateZ(-300px); opacity: .6; } .stars:after
- { transform: translateZ(-600px); opacity: .4; } @keyframes fly { from {
- transform: translateZ(0px); opacity: .6; } to { transform: translateZ(300px);
- opacity: 1; } }
- </style>
- </head>
- <body>
- <div class="stars">
- </div>
- </body>
- <script>
- var w = document.documentElement.clientWidth * 1.2;
- var h = document.documentElement.clientHeight * 1.2;
- var star = document.getElementsByClassName("stars")[0];
- var n = 1000;
- // 随机函数
- function randomNum(m, n) {
- return Math.floor(Math.random() * (n - m + 1) + m);
- }
- var str = '';
- for (var i = 0; i < n; i++) {
- var numX = randomNum( - w, w);
- var numY = randomNum( - h, h);
- var color = 'rgb(' + randomNum(0, 255) + ',' + randomNum(0, 255) + ',' + randomNum(0, 255) + ')';
- str += numX + 'px' + '' + numY + 'px' + ' ' + color + ',';
- }
- str = str.slice(0, -1);
- star.style.boxShadow = str;
- </script>
- </HTML>
来源: http://www.qdfuns.com/article/31702/4010cc3612e7e8af35bed106bbc8f4b7.html