纯CSS静态starfield [英] Pure CSS static starfield
问题描述
我想知道如何使用仅星星不移动的CSS创建一个星域。我发现了一些动画星形字段的例子，但我不想要的动画部分。请帮助我了解在不使用图片文件的情况下如何创建此类静态背景。
如果...会发生什么情况，以下代码直接从此处被盗用，并稍微修改为静态。结果是可预测的：一个基本的，重复的星形字段。
< html&
< head>
< title>测试星空field< / 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）），
径向渐变（2px 2px在50px 160px，#ddd，rgba （0,0,0,0）），
径向渐变（2px 2px在90px 40px，#fff，rgba（0,0,0,0）），
径向渐变在130px 80px，#fff，rgba（0,0,0,0）），
径向渐变（2px 2px在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的功能部分是构建 I would like to know how to create a star field using only CSS where the stars do not move. I have found some examples of animated star fields but I don't want the animation portion. Please help me understand how this type of static background could be created without using image files. As an exercise in "let's see what happens if..." the following code was directly stolen from here and modified slightly to be static. The result is predictable: a basic, repetitive star field. Obviously, the functional part of this CSS is building up the 这篇关于纯CSS静态starfield的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！ background-image 结果结果 <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>
background-image in pieces made up of radial-gradient results.
