Question

我想知道如何仅使用星星不移动的CSS来创建星形场。我找到了动画星域的一些例子，但我不想要动画部分。请帮助我了解如何在不使用图像文件的情况下创建此类静态背景。

Answer 1

作为“让我们看看会发生什么......”的练习，以下代码直接从here被盗，并略微修改为静态。结果是可预测的：一个基本的，重复的星形场。

<html>
 <head>
  <title>Testing a starfield</title>
  <style>
#space, .stars {
  overflow: hidden;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
}

.stars {
  background-image: 
    radial-gradient(2px 2px at 20px 30px, #eee, rgba(0,0,0,0)),
    radial-gradient(2px 2px at 40px 70px, #fff, rgba(0,0,0,0)),
    radial-gradient(2px 2px at 50px 160px, #ddd, rgba(0,0,0,0)),
    radial-gradient(2px 2px at 90px 40px, #fff, rgba(0,0,0,0)),
    radial-gradient(2px 2px at 130px 80px, #fff, rgba(0,0,0,0)),
    radial-gradient(2px 2px at 160px 120px, #ddd, rgba(0,0,0,0));
  background-repeat: repeat;
  background-size: 200px 200px;
}

body {
  background: #000;
}
  </style>
 </head>
 <body>
  <div id="space">
   <div class="stars"></div>
   <div class="stars"></div>
   <div class="stars"></div>
   <div class="stars"></div>
   <div class="stars"></div>
  </div>
 </body>
</html>

显然，这个CSS的功能部分是在由background-image个结果组成的部分中构建radial-gradient。

纯CSS静态星空

1 个答案: