本文实例为大家分享了js实现漂亮星空背景的具体代码,供大家参考,具体内容如下
- <div class="stars"></div>
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;
- }
- }
js代码
- 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) + ')';
- str += numX +'px'+' ' + numY+'px'+' '+ color+',';
- }
- str = str.slice(0,-1);
- star.style.BoxShadow = str;
- $(function(){
- $('#main').fadeOut();
- $('#main').fadeIn('slow');
- })