纯 CSS 静态星空 [已关闭]-解网

问：

想改进这个问题吗？通过编辑这篇文章来更新问题，使其仅关注一个问题。

9年前关闭。

改进此问题

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

CSS的

<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-imageradial-gradient

上一个：为什么 ||JavaScript 中的（or）和 && （and）运算符的行为与 C 中的行为不同（返回非布尔值）？

下一个：Pandas 函数操作

纯 CSS 静态星空 [已关闭]

Pure CSS static starfield [closed]

评论