介绍 & lt; div 类=皊tars"祝辞& lt;/div> , html, body {
,高度:100%;
,溢出:隐藏;
,}
,body {
,宽度:100%;
,高度:100%;
背景:大敌;# 000;
,background-size: 100%;
,视角:500 px;
,}
,.stars {
,位置:绝对;
,上图:50%;
,左:50%;
,宽度:4 px;
,高度:4 px;
,-webkit-border-radius: 50%;
,-moz-border-radius: 50%;
,这个特性:50%;
动画:大敌;fly 2 s linear 无限;
,传输格式:preserve-3d;
,}
,.stars:以前,.stars: after {
,内容:““;
,位置:绝对;
宽度:大敌;继承;
高度:大敌;继承;
不必:大敌;继承;
,}
,.stars: before {
,变换:translateZ (-300 px);
,不透明度:6;
,}
,.stars: after {
,变换:translateZ (-600 px);
,不透明度:。4;
,}
,@keyframes fly {
,得到{
,变换:translateZ (0 px);
,不透明度:6;
,}
,用{
,变换:translateZ (300 px);
,不透明度:1;
,}
以前,} 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 =, & # 39; & # 39;;
,for (var 小姐:=,0;,小姐:& lt;, n;,我+ +),{
,var numX =, randomNum (- w, w);
,var numY =, randomNum (- h, h);
,var color =, & # 39; rgb (& # 39;, +, randomNum (0, 255), +, & # 39;, & # 39;, +, randomNum (0, 255), +, & # 39;, & # 39;, +, randomNum (0, 255), +, & # 39;) & # 39;;
+=,str numX + & # 39; px # 39; + & # 39;, & # 39;, +, numY + & # 39; px # 39; + & # 39;, & # 39; +,颜色+ & # 39;& # 39;;
,}=,,str str.slice (0,1);=,,star.style.boxShadow str;
美元才能(函数(){
,,美元(& # 39;#主要# 39;).fadeOut ();
,,美元(& # 39;#主要# 39;).fadeIn(& # 39;慢# 39;);
之前,})
这篇文章给大家分享的是有关js如何实现漂亮的星空背景的内容。小编觉得挺实用的,因此分享给大家做个参考,一起跟随小编过来看看吧。
具体内容如下
html代码:
css代码
js代码,
