简单js实现星星海特效

github星星海地址

<body>
  <span></span>
</body>

在body里放一个span标签来存放星星

    span{
      width: 30px;
      height: 30px;
      background: url('./01-星星海特效/images/star.png') no-repeat;
      position: absolute;
      background-size: 100% 100%;
      animation: flash 1s alternate infinite;
    }

    @keyframes flash {
      0% {opacity:0;}
      100%{opacity:1;}
    }

在cssspan标签里添加一个星星图片，利用css动画，来控制透明度，依次实现闪烁的效果

    // 1. 求出屏幕的尺寸
    var screenW = document.documentElement.clientWidth
    var screenH = document.documentElement.clientHeight

js获取屏幕的宽度和高度

    for(var i=0;i<150;i++){
      var span = document.createElement('span')
      document.body.appendChild(span)
      }

for循环动态创建一定数量的星星

      // 2.2 随机的坐标
     var x = Math.random() * screenW
     var y = Math.random() * screenH
     console.log(x,y);
     
     
     span.style.left = x + 'px'
     span.style.top = y + 'px'

由于之前设置了绝对定位，所以现在可以来改变每个span的x,y的坐标

      // 2.3 随机缩放
     var scale = Math.random() * 1.5
     span.style.transform = `scale(${scale},${scale})`

之前的星星大小是一样的，现在控制星星的缩放比例，来实现不同大小的星星

      // 2.4频率
     var rate = Math.random() * 1.5
     span.style.animationDelay = rate + 's'

最后，通过延迟播放，来让星星不同时间闪烁