js实现漂亮的星空背景
本文实例为大家分享了js实现漂亮星空背景的具体代码,供大家参考,具体内容如下
html代码:
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:fly2slinearinfinite; 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; } @keyframesfly{ from{ transform:translateZ(0px); opacity:.6; } to{ transform:translateZ(300px); opacity:1; } }
js代码
varw=document.documentElement.clientWidth*1.2; varh=document.documentElement.clientHeight*1.2; varstar=document.getElementsByClassName("stars")[0]; varn=1000; //随机函数 functionrandomNum(m,n){ returnMath.floor(Math.random()*(n-m+1)+m); } varstr=''; for(vari=0;i以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持毛票票。
声明:本文内容来源于网络,版权归原作者所有,内容由互联网用户自发贡献自行上传,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任。如果您发现有涉嫌版权的内容,欢迎发送邮件至:czq8825#qq.com(发邮件时,请将#更换为@)进行举报,并提供相关证据,一经查实,本站将立刻删除涉嫌侵权内容。