RAINY CLOUD CSS @Dr Tech

0 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);

}