小程序版纯css星空粒子背景
时间: 2023-10-01 09:09:48 浏览: 50
以下是一个纯 CSS 实现的星空粒子背景的代码示例,你可以将其添加到你的小程序中:
```html
<!-- HTML -->
<div class="stars"></div>
```
```css
/* CSS */
.stars {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: -1;
background-color: #000;
}
.stars:before {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100%25' height='100%25'%3E%3Cdefs%3E%3CradialGradient id='grad'%3E%3Cstop offset='50%25' stop-color='%23fff'/%3E%3Cstop offset='100%25' stop-color='%23333'/%3E%3C/radialGradient%3E%3C/defs%3E%3Crect width='100%25' height='100%25' fill='url(%23grad)'/%3E%3C/svg%3E") repeat 0 0;
z-index: -1;
}
.stars:after {
content: "";
position: absolute;
top: 0;
left: 0;
width: 1px;
height: 1px;
background-color: transparent;
box-shadow: 0 0 2px #fff, 0 0 3px #fff, 0 0 6px #fff, 0 0 9px #fff, 0 0 12px #fff;
animation: stars 50s linear infinite;
z-index: -1;
}
@keyframes stars {
from {
transform: translateY(0);
}
to {
transform: translateY(-100vh);
}
}
```
这段代码使用了 CSS3 的 `box-shadow` 属性来创建星星的效果,并使用 `animation` 属性来实现星星的运动效果。你可以根据需要自行调整代码中的参数来改变星空背景的效果。