Fatal编程技术网
  • css/
  • Css 纯静态星场

Css 纯静态星场

css

Css 纯静态星场,css,Css,我想知道如何创建一个只使用CSS的星星不移动字段。我找到了一些动画星场的示例，但我不想要动画部分。请帮助我了解如何在不使用图像文件的情况下创建这种类型的静态背景。作为练习，让我们看看如果。。。下面的代码是直接从中盗取的，并稍微修改为静态代码。结果是可以预测的：一个基本的、重复的星场 <html> <head> <title>Testing a starfield</title> <style> #space, .stars {

我想知道如何创建一个只使用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的功能部分是建立由径向梯度结果组成的背景图像。

我想要一个宇宙飞船！但严肃地说，这个问题缺乏努力和理解。你的代码在哪里，你尝试了什么？没有关于你想要实现什么的细节，没有明确的方向，你甚至没有尝试提出正确的问题。可能是因为你的问题很短，没有显示出你的努力，而且似乎故意打折了可能是最好或唯一可能的通常解决方案…可能是因为您的问题太广泛，并且您还没有发布您当前拥有的代码。所以不是一个“做我的家庭作业”的网站，只是谷歌搜索css starfield，看看你得到了什么。。。