HTML+CSS小项目：下雨的云。快速完成毕业设计（220728）
我的学习笔记：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" >
<meta name="viewport">
<title>the rain cloud</title>
<style type="text/css">
body{
background-color:#212121;
display: flex;
justify-content: center;/*justify-content 属性（水平）对齐弹性容器的项目，当项目不占用主轴上所有可用空间时。*/
align-items: center;
width: 100%;
height: 90vh;
}
.container{
position: relative;
width: 110px;
height: 30px;
background: #FFFFFF;
border-radius: 100px;
}
.container::before{
content: ' ';
position: absolute;
top: -20px;
left: 10px;
width: 30px;
height: 30px;
background: #FFFFFF;
border-radius: 50%;
box-shadow: 40px 0 0 20px #FFFFFF;
}
.rain{
position: relative;
display: flex;
z-index: 1;/*z-index 属性设置元素的堆叠顺序*/
}
.rain span{
position: relative;
width: 3px;
height: 3px;
background: #FFFFFF;
margin: 10px 2px;
border-radius: 50%;
animation: rain 5s linear infinite;
animation-duration: calc(15s/var(--speed));
transform-origin: bottom;
}
@keyframes rain{
0%{
transform:translateY(0);
}
70%{
transform: translateY(100px)scale(1);
}
100%{
transform: translateY(100px)scale(0);
}
}
</style>
</head>
<body>
<div>
<div>
<span style="--speed:11"></span>
<span style="--speed:17"></span>
<span style="--speed:13"></span>
<span style="--speed:18"></span>
<span style="--speed:15"></span>
<span style="--speed:16"></span>
<span style="--speed:13"></span>
<span style="--speed:18"></span>
<span style="--speed:19"></span>
<span style="--speed:20"></span>
<span style="--speed:15"></span>
<span style="--speed:16"></span>
<span style="--speed:15"></span>
<span style="--speed:18"></span>
<span style="--speed:14"></span>
<span style="--speed:20"></span>
</div>
</div>
</body>
</html>
