RAINY CLOUD CSS @Dr Tech
HTML And CSS Cooding
July 06, 2022
HTML COODING
<!DOCTYPE html>
<html>
<head>
<title>RAINY CLOUD</title>
<link rel="stylesheet" type="text/css" href="rain1.css">
</head>
<body>
<div class="container"></div>
<div class="cloud"></div>
<div class="rain">
<span style="--i:11;"></span>
<span style="--i:12;"></span>
<span style="--i:14;"></span>
<span style="--i:16;"></span>
<span style="--i:15;"></span>
<span style="--i:13;"></span>
<span style="--i:18;"></span>
<span style="--i:20;"></span>
<span style="--i:13;"></span>
<span style="--i:18;"></span>
<span style="--i:19;"></span>
<span style="--i:13;"></span>
</div>
</body>
</html>
CSS COODING
*
{
margin: 0;
padding: 0;
box-sizing: border-box;
}
body
{
display: flex;
justify-content: center;
align-items: center;
min-height: 50vh;
background: #181c1f;
}
.container{
position: relative;
}
.cloud{
position: relative;
top: 20px;
width: 320px;
height: 100px;
background: #fff;
border-radius: 100px;
border-bottom: 4px solid blue;
}
.cloud::before{
content: '';
position: absolute;
top: -50px;
left: 40px;
width: 110px;
height: 100px;
background: #fff;
border-radius: 50%;
box-shadow: 90px 0 0 30px #fff;
}
.rain{
position: relative;
display: flex;
z-index: 1;
padding: 0 20px;
}
.rain span{
position: relative;
bottom: 10px;
width: 17px;
height: 10px;
background: linear-gradient(190deg,gold,silver,red,green,blue,yellow);
margin: -22px;
margin-top: 120px;
border-radius: 50%;
animation:animate 5s linear infinite;
animation-duration: calc(15s / var(--i));
transform-origin: bottom;
}
@keyframes animate{
0%{
transform: translateY(0) scale(1);
}
70%{
transform: translateY(298px) scale(1);
}
100%{
transform: translateY(298px) scale(0);
}
}
