Rainy cloud

Developer
Mghayour
Size
2,287 Kb
Views
18,216
  1. Rainy cloud Previews
  2. Rainy cloud HTML Codes
  3. Rainy cloud CSS Codes

How do I make an rainy cloud?

What is a rainy cloud? How do you make a rainy cloud? This script and codes were developed by Mghayour on 31 October 2022, Monday.

Rainy cloud Previews
IQ Test

Rainy cloud - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Rainy cloud</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div class="cloud" data-type="rainy_1" > <div class="rain"></div>
</div>
</body>
</html>

Rainy cloud - Script Codes CSS Codes

body{ background-color: #81cee8;
}
.main_window{ overflow: hidden; display: block; padding: 0; margin: 0 auto; width: 1256px; height: 624px; position: relative;
}
div{ margin: 50px; padding: 0px;
}
.cloud{ width: 200px; height: 50px; margin: 100px auto; background-color: #fff; border-radius: 30px; position: relative;
}
[data-type=rainy_1]{ background-color: #13006b;
}
[data-type=rainy_1]:before{ content: ""; display: block; width: 50px; height: 50px; top: -20px; left: 20px; background-color: #13006b; border-radius: 30px; position: absolute; box-shadow: 80px 0 0 10px #13006b, 40px 0 0 20px #13006b, 110px 0 0 -5px #13006b;
}
@-webkit-keyframes rain_move
{
from {top:-40.6px;}
to {top:-20.3px;}
}
@-moz-keyframes rain_move
{
from {top:-40.6px;}
to {top:-20.3px;}
}
@-ms-keyframes rain_move
{
from {top:-40.6px;}
to {top:-20.3px;}
}
@-o-keyframes rain_move
{
from {top:-40.6px;}
to {top:-20.3px;}
}
@keyframes rain_move
{
from {top:-40.6px;}
to {top:-20.3px;}
}
.rain{ z-index:-1; -webkit-transform: rotate(-45deg); -moz-transform: rotate(-45deg); -ms-transform: rotate(-45deg); -o-transform: rotate(-45deg); transform: rotate(-45deg); content: ""; display: block; width: 10px; height: 10px; top: -10px; left: -30px; border-radius: 50px 0 50px 0; position: absolute; box-shadow: 0px 0px 0 0 #00f, 0px 20px 0 0 #00f, 10px 30px 0 0 #00f, 20px 40px 0 0 #00f, 30px 50px 0 0 #00f, 40px 60px 0 0 #00f, 50px 70px 0 0 #00f, 60px 80px 0 0 #00f, 70px 90px 0 0 #00f, 80px 100px 0 0 #00f, 90px 110px 0 0 #00f, -15px 35px 0 0 #00f, -5px 45px 0 0 #00f, 5px 55px 0 0 #00f, 15px 65px 0 0 #00f, 25px 75px 0 0 #00f, 35px 85px 0 0 #00f, 45px 95px 0 0 #00f, 55px 105px 0 0 #00f, 65px 115px 0 0 #00f, 75px 125px 0 0 #00f, -30px 50px 0 0 #00f, -20px 60px 0 0 #00f, -10px 70px 0 0 #00f, 0px 80px 0 0 #00f, 10px 90px 0 0 #00f, 20px 100px 0 0 #00f, 30px 110px 0 0 #00f, 40px 120px 0 0 #00f, 50px 130px 0 0 #00f, 60px 140px 0 0 #00f, -45px 65px 0 0 #00f, -35px 75px 0 0 #00f, -25px 85px 0 0 #00f, -15px 95px 0 0 #00f, -5px 105px 0 0 #00f, 5px 115px 0 0 #00f, 15px 125px 0 0 #00f, 25px 135px 0 0 #00f, 35px 145px 0 0 #00f, 45px 155px 0 0 #00f, -60px 80px 0 0 #00f, -50px 90px 0 0 #00f, -40px 100px 0 0 #00f, -30px 110px 0 0 #00f, -20px 120px 0 0 #00f, -10px 130px 0 0 #00f, 0px 140px 0 0 #00f, 10px 150px 0 0 #00f, 20px 160px 0 0 #00f, 30px 170px 0 0 #00f, -75px 95px 0 0 #00f, -65px 105px 0 0 #00f, -55px 115px 0 0 #00f, -45px 125px 0 0 #00f, -35px 135px 0 0 #00f, -25px 145px 0 0 #00f, -15px 155px 0 0 #00f, -5px 165px 0 0 #00f, 5px 175px 0 0 #00f, 15px 185px 0 0 #00f, -90px 110px 0 0 #00f, -80px 120px 0 0 #00f, -70px 130px 0 0 #00f, -60px 140px 0 0 #00f, -50px 150px 0 0 #00f, -40px 160px 0 0 #00f, -30px 170px 0 0 #00f, -20px 180px 0 0 #00f, -10px 190px 0 0 #00f, 0px 200px 0 0 #00f, -105px 125px 0 0 #00f, -95px 135px 0 0 #00f, -85px 145px 0 0 #00f, -75px 155px 0 0 #00f, -65px 165px 0 0 #00f, -55px 175px 0 0 #00f, -45px 185px 0 0 #00f, -35px 195px 0 0 #00f, -25px 205px 0 0 #00f, -15px 215px 0 0 #00f, -120px 140px 0 0 #00f, -110px 150px 0 0 #00f, -100px 160px 0 0 #00f, -90px 170px 0 0 #00f, -80px 180px 0 0 #00f, -70px 190px 0 0 #00f, -60px 200px 0 0 #00f, -50px 210px 0 0 #00f, -40px 220px 0 0 #00f, -30px 230px 0 0 #00f, -135px 155px 0 0 #00f, -125px 165px 0 0 #00f, -115px 175px 0 0 #00f, -105px 185px 0 0 #00f, -95px 195px 0 0 #00f, -85px 205px 0 0 #00f, -75px 215px 0 0 #00f, -65px 225px 0 0 #00f, -55px 235px 0 0 #00f, -45px 245px 0 0 #00f, -150px 170px 0 0 #00f, -140px 180px 0 0 #00f, -130px 190px 0 0 #00f, -120px 200px 0 0 #00f, -110px 210px 0 0 #00f, -100px 220px 0 0 #00f, -90px 230px 0 0 #00f, -80px 240px 0 0 #00f, -70px 250px 0 0 #00f, -60px 260px 0 0 #00f; -webkit-animation:rain_move 0.3s; -webkit-animation-timing-function:linear; -webkit-animation-iteration-count:infinite; -moz-animation:rain_move 0.3s; -moz-animation-timing-function:linear; -moz-animation-iteration-count:infinite; -o-animation:rain_move 0.3s; -o-animation-timing-function:linear; -o-animation-iteration-count:infinite; animation:rain_move 0.3s; animation-timing-function:linear; animation-iteration-count:infinite;
}
Rainy cloud - Script Codes
Rainy cloud - Script Codes
Home Page Home
Developer Mghayour
Username mghayour
Uploaded October 31, 2022
Rating 3
Size 2,287 Kb
Views 18,216
Do you need developer help for Rainy cloud?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Mghayour (mghayour) Script Codes
Name
Download Button
Border-radius
An other menu
Wp tab
Avn Slider
An other linear loader
Ghost
MG Factory
An other layout
IRan Flag
Create amazing Facebook ads with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!