利用css制作静态星空背景
时间: 2023-08-18 22:21:52 浏览: 74
可以通过以下步骤利用 CSS 制作静态星空背景:
1. 为 HTML 页面添加一个容器元素,例如 div,用于容纳星空背景。
2. 设置容器元素的宽度和高度,并将其 position 属性设置为 fixed,这样可以使其固定在浏览器窗口中。
3. 在容器元素中创建一个伪元素,用于绘制星星。可以使用 CSS 的 content 属性来插入内容,使用 position 属性将伪元素定位在容器元素中心。
4. 使用 CSS 的 animation 和 keyframes 属性创建动画效果,以使星星随机闪烁。
下面是一个示例 CSS 代码:
```css
body {
margin: 0;
padding: 0;
}
.container {
width: 100%;
height: 100vh;
position: fixed;
background-color: #000;
}
.container::before {
content: "";
position: absolute;
top: 50%;
left: 50%;
width: 800px;
height: 800px;
margin-top: -400px;
margin-left: -400px;
background-image: url(star.png);
animation: twinkling 10s linear infinite;
}
@keyframes twinkling {
0% {
opacity: 0.1;
}
50% {
opacity: 1;
}
100% {
opacity: 0.1;
}
}
```
在这个例子中,我们使用一个容器元素 `.container` 并设置其宽度和高度为 100% 和 100vh,将其 position 设置为 fixed,以保证其固定在浏览器窗口中。然后我们使用伪元素 `::before` 来绘制星星背景,并将其定位在容器元素中心。
为了使星星出现闪烁效果,我们使用了 animation 和 keyframes 属性来创建一个名为 `twinkling` 的动画。动画周期为 10 秒,线性运动,无限循环。在 keyframes 中,我们调整了星星的透明度,以产生闪烁效果。
注意:在这个例子中,我们使用了一张名为 `star.png` 的背景图片,该图片包含了许多星星。你可以使用任何你想要的星空背景图片。