静态星空背景-免费技术资源分享-凯尤木江博客圈

静态星空背景

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>太空</title>
  <style>
    body{
      width: 100%;
      height: 1000px;
      background: linear-gradient(to bottom right, #000, #2073c2 60%, #dff6ff);
      overflow: hidden;
    }
    span{
      display: block;
      position: absolute;
      border-radius: 50%;
      box-shadow: 0.4px 0.4px 0.4px 0px #fff;
    }
  </style>
</head>
<body>
 
<script>
  window.onload = function(){
    var screenW = document.documentElement.clientWidth;
    var screenH = document.documentElement.clientHeight;
    var colorArr = ['#fff','skyblue','orange'];
    console.log(screenW);
    for( var i=0; i<800; i++ ){
      var span = document.createElement('span');
      var width = Math.random() * 3;
      var colorIndex = parseInt(Math.random() * 3);
      var x = parseInt(Math.random() * screenW);
      var y = parseInt(Math.random() * screenH);
      span.style.width = parseInt(width) + 'px';
      span.style.height = parseInt(width) + 'px';
      span.style.background = colorArr[colorIndex];
      span.style.left = x + 'px';
      span.style.top = y + 'px';
 
      document.body.appendChild(span);
    }
  }
</script>
</body>
</html>

文章版权归作者所有，未经允许请勿转载。

1 本网站名称：凯尤木江博客圈
2 本站永久网址：m.kaynak.top
3 本网站的文章部分内容可能来源于网络，仅供大家学习与参考，如有侵权，请联系站长进行删除处理。
4 本站一切资源不代表本站立场，并不代表本站赞同其观点和对其真实性负责。
5 本站一律禁止以任何方式发布或转载任何违法的相关信息，访客发现请向站长举报
6 本站资源大多存储在云盘，如发现链接失效，请联系我们我们会第一时间更新。

THE END