先看gif图,实现这种效果可以用js写也可以用css来写但是很恶心。
这次实现的方式是用的sass来写的,使用sass教程可以看官网 :sass中文网
首先得引入sass库才能自动帮我们编译成css。
这里用星空来举个例子:
HTML代码很简单,就四个速度不同、大小不同、无线循环滚动的div和一个背景图
<div class="layer1"></div>
<div class="layer2"></div>
<div class="layer3"></div>
<div class="layer4"></div>
<div class="banner"></div>
sass代码
//首先定义背景
.banner {
background-color: rgba(0, 0, 0, 0.8509803922);
height: 100vh;
width: 100%;
}
//定义星空背景用shadow来循环生成
@function getShadows($n) {
$Shadows :'#{random(100)}vw #{random(100)}vh #fff';
@for $i from 2 to $n {
$Shadows :'#{$Shadows}, #{random(100)}vw #{random(100)}vh #fff';
}
@return unquote($Shadows)
}
$duration :500s; //滚动时间
$count :500; //星空的数量
//循环生成星空,layer1到layer4
@for $i from 1 to 5 {
$duration: floor($duration/2);
$count: floor($count/2);
.layer#{$i} {
$size:#{$i}px;
position: fixed;
width: $size;
height: $size;
background-color: rgba(0, 0, 0, 0.032);
border-radius: 50%;
top: 0;
left: 0;
box-shadow: getShadows($count);
animation: moveUp $duration linear infinite;
&::after {
content: '';
position: fixed;
left: 0;
top: -100vh;
border-radius: inherit;
box-shadow: inherit;
width: $size;
height: $size;
}
}
}
//滚动的动画,无限像Y轴滚动,
@keyframes moveUp {
100% {
transform: translateY(100vh);
}
}
月亮的代码很简单,
流星的代码跟星空类似但不是完全相同,需要动动脑筋,可以私聊找我要源码哦~~