首先我們來製作HTML部分
我們第一步呢還是先定義變數，loader，然後我們在下面在定義一個snow代表雪花，下面定義各自的變數，讓20片雪花隨機下滑
<div>
<div>
<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>
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
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);
}
}
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.
32.
33.
34.
35.
36.
37.
38.
39.
40.
41.
42.
43.
44.
45.
46.
47.
48.
49.
50.
51.
52.
53.
接下來展示源碼！
<!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>
<div>
<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>
-----------------------------------
©著作權歸作者所有：來自51CTO博客作者學習c#的小超的原創作品，請聯繫作者獲取轉載授權，否則將追究法律責任
使用CSS來製作下雨的效果
https://blog.51cto.com/u_15879139/6406598
