html流星雨页面,纯CSS流星雨背景的示例代码

插件预览图

使用教程代码展示

vue页面使用

Style

.space {

width: 100%;

height: 100vh;

background: #121212;

}

.planet {

width: 150px;

height: 150px;

border-radius: 50%;

background: #333;

position: absolute;

left: 50%;

top: 50%;

margin: -75px 0 0 -75px;

overflow: hidden;

z-index: 2;

}

.planet_shadow {

position: absolute;

border-radius: 50%;

height: 100%;

width: 100%;

top: -40%;

right: -10%;

border: 35px solid rgba(0, 0, 0, .15);

}

.crater1,

.crater2,

.crater3,

.crater4 {

position: absolu