HTML+CSS小項(xiàng)目：下雨的云。快速完成畢業(yè)設(shè)計(jì)（220728）
我的學(xué)習(xí)筆記：
<!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 屬性（水平）對(duì)齊彈性容器的項(xiàng)目，當(dāng)項(xiàng)目不占用主軸上所有可用空間時(shí)。*/
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 屬性設(shè)置元素的堆疊順序*/
}
.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>
