首先我们来制作HTML部分
我们第一步呢还是先定义变量，loader，然后我们在下面在定义一个snow代表雪花，下面定义各自的变量，让20片雪花随机下滑
<div class="loader">
<div class="snow">
<span style="--i:11"></span>
<span style="--i:12"></span>
<span style="--i:15"></span>
<span style="--i:17"></span>
<span style="--i:18"></span>
<span style="--i:13"></span>
<span style="--i:14"></span>
<span style="--i:19"></span>
<span style="--i:20"></span>
<span style="--i:10"></span>
......
</div>
</div>css部分
这里使用了伪类选择器
第一是做我们云朵的形状：我们先得设置相对定位，这样雪花才能来到我们下面
然后我们使用圆角边框，第二步我们来写伪元素，用伪元素画两个圆通过位置改变来组成云朵
第三个使用伪元素来设置雪花和雪花的动画效果
body{
display: flex;
align-items: center;
justify-content: center;
background-color: black;
transform: translateY(100px);
}
.loader{
position: relative;
width: 110px;
height: 30px;
background-color: #fff;
border-radius: 100px;
}
.loader::before{
content: '';
position: absolute;
width: 30px;
height: 30px;
background: #fff;
border-radius: 50%;
box-shadow: 40px 0 0 20px #fff;
left: 10px;
top: -20px;
}
.snow{
position: relative;
display: flex;
z-index: 1;
}
.snow span{
position: relative;
width: 3px;
height: 3px;
background-color: #fff;
margin: 0 2px;
border-radius: 50%;
animation: snowing 5s linear infinite;
animation-duration: calc(15s / var(--i));
}
@keyframes snowing{
from{
transform: translateY(0px);
}
70%{
transform: translateY(100px)
scale(1);
}
to{
transform: translateY(100px)
scale:(0);
}
}接下来展示源码！
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style type="text/css">
body{
display: flex;
align-items: center;
justify-content: center;
background-color: black;
transform: translateY(100px);
}
.loader{
position: relative;
width: 110px;
height: 30px;
background-color: #fff;
border-radius: 100px;
}
.loader::before{
content: '';
position: absolute;
width: 30px;
height: 30px;
background: #fff;
border-radius: 50%;
box-shadow: 40px 0 0 20px #fff;
left: 10px;
top: -20px;
}
.snow{
position: relative;
display: flex;
z-index: 1;
}
.snow span{
position: relative;
width: 3px;
height: 3px;
background-color: #fff;
margin: 0 2px;
border-radius: 50%;
animation: snowing 5s linear infinite;
animation-duration: calc(15s / var(--i));
}
@keyframes snowing{
from{
transform: translateY(0px);
}
70%{
transform: translateY(100px)
scale(1);
}
to{
transform: translateY(100px)
scale:(0);
}
}
</style>
</head>
<body>
<div class="loader">
<div class="snow">
<span style="--i:11"></span>
<span style="--i:12"></span>
<span style="--i:15"></span>
<span style="--i:17"></span>
<span style="--i:18"></span>
<span style="--i:13"></span>
<span style="--i:14"></span>
<span style="--i:19"></span>
<span style="--i:20"></span>
<span style="--i:10"></span>
......
</div>
</div>
</body>
</html>
