用到css3知识: radial-gradient 径向渐变, filter, transform, animation以及 nth-child选择器等
html代码:
<div class="container">
<div class="meteor"></div>
<div class="meteor"></div>
<div class="meteor"></div>
<div class="meteor"></div>
<div class="meteor"></div>
<div class="meteor"></div>
<div class="meteor"></div>
<div class="meteor"></div>
<div class="meteor"></div>
<div class="meteor"></div>
<div class="meteor"></div>
<div class="meteor"></div>
<div class="meteor"></div>
<div class="meteor"></div>
<div class="meteor"></div>
<div class="meteor"></div>
<div class="meteor"></div>
</div>
css3代码:
*{
margin: 0;
padding: 0;
}
body{
background: radial-gradient(ellipse at bottom, #1b2735 0%, #090a0f 100%);
height: 100vh; /* == height: 100% */
overflow: hidden;
font-family: 'Times New Roman', Times, serif;
justify-content: center;
align-items: center;
}
.container{
position: relative;
width: 100%;
height: 100%;
-webkit-transform: rotate(45deg);
transform: rotateZ(45deg);
-webkit-animation: sky 200000ms linear infinite;
animation: sky 200000ms linear infinite;
}
.meteor{
position: absolute;
left: 50%;
top: 50%;
height: 2px;
background: