实现一个星空背景样式

看到一个教程，使用sass写的，但是项目中没有使用sass，用的是less，但是less我搞不明白，算了，直接用js搞好了

先贴一下sass实现的方案：

<div className="view_container">
    <div className="layer1"></div>
    <div className="view_title">View Page</div>
</div>

.view_title{
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
    font-size: 48px;
}
  
.layer1{
  $size: 1px;
  position: fixed;
  width: $size;
  height: $size;
  left: 0;
  top: 0;
  text-shadow: getShadows(1000)
}

@function getShadows($n){
  $shadows: '#{random(100)}vw #{random(100)}vh #fff'

  @for $i from 2 through $n{
    $shadows:'#{$shadows}, #{random(100)}vw #{random(100)}vh #fff';
  }
  @return unquote($shadows)
}

然后我就用js写了：

const ViewPage = () => {
  const generateShadows = () => {
    const shadows: any = [];
    for (let i = 0; i < 300; i++) {
      const posX = Math.random() * 100; // 随机生成 x 轴位置
      const posY = Math.random() * 100; // 随机生成 y 轴位置
      shadows.push(`${posX}vw ${posY}vh #fff`);
    }
    return shadows.join(", ");
  };

  return (
    <div className="view_container">
      <div className="layer1" style={{ boxShadow: generateShadows() }}></div>
      <div className="view_title">View Page</div>
    </div>
  );
};

export default ViewPage;