Gloomy Cloud

Developer
Elleestcrimi
Size
3,769 Kb
Views
36,432
  1. Gloomy Cloud Previews
  2. Gloomy Cloud HTML Codes
  3. Gloomy Cloud CSS Codes
  4. Gloomy Cloud JS Codes

How do I make an gloomy cloud?

What is a gloomy cloud? How do you make a gloomy cloud? This script and codes were developed by Elleestcrimi on 11 August 2022, Thursday.

Gloomy Cloud Previews
IQ Test

Gloomy Cloud - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Gloomy Cloud</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css"> <style> /* NOTE: The styles were added inline because Prefixfree needs access to your styles and they must be inlined if they are on local disk! */ html, body { background: #5D99B1; overflow: hidden;
}
.drop { background: #fff; width: 1px; height: 20px; top: -40px; animation: fall 1.2s ease-in 0s infinite; animation-fill-mode: both; margin-right: 45px; position: absolute; animation-delay: 0.9s; margin-left: 10px;
}
.drop:nth-child(even) { top: -60px;
}
.drop:nth-child(3n - 1) { top: 0px;
}
.drop:nth-child(3n + 1) { margin-left: 40px;
}
.drop:nth-child(3n) { margin-left: 80px !important;
}
.drop:nth-child(4n) { margin-left: 120px !important;
}
.drop:nth-child(5) ~ .drop { animation-delay: 0.6s !important; left: 30px;
}
.drop:nth-child(8) ~ .drop { animation-delay: 0.3s !important; left: 0px;
}
.drop:nth-child(12) ~ .drop { animation-delay: 0s !important; left: 30px;
}
#stuff { position: absolute; margin: auto; top: 100px; left: 0; right: 0; bottom: 0; width: 200px;
}
.cloud { height: 110px; width: 110px; border-radius: 150px 150px 150px 0; position: relative;
}
.cloud, .cloud:before, .cloud:after { box-shadow: inset 20px 10px 40px -32px rgba(0, 0, 0, 0.75); background: #fff;
}
.cloud:before, .cloud:after { content: " "; display: block; position: absolute; bottom: 0px;
}
.cloud:before { height: 60px; width: 60px; border-radius: 150px; left: -30px;
}
.cloud:after { height: 130px; width: 130px; border-radius: 150px 150px 150px 0; right: -75px; z-index: -1;
}
@keyframes fall { 0% { margin-top: 90px; opacity: 1; } 60% { opacity: 1; } 100% { margin-top: 500px; opacity: 0; }
}
@keyframes float { 0% { left: 0%; } 50% { left: 100%; } 50.0001% { left: -120%; } 100% { left: 0%; }
} </style> <script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
</head>
<body> <div id='stuff'> <div class='cloud'></div> <div class='drop'></div> <div class='drop'></div> <div class='drop'></div> <div class='drop'></div> <div class='drop'></div> <div class='drop'></div> <div class='drop'></div> <div class='drop'></div> <div class='drop'></div> <div class='drop'></div> <div class='drop'></div> <div class='drop'></div> <div class='drop'></div> <div class='drop'></div> <div class='drop'></div> <div class='drop'></div>
</div> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

Gloomy Cloud - Script Codes CSS Codes

html, body { background: #5D99B1; overflow: hidden;
}
.drop { background: #fff; width: 1px; height: 20px; top: -40px; animation: fall 1.2s ease-in 0s infinite; animation-fill-mode: both; margin-right: 45px; position: absolute; animation-delay: 0.9s; margin-left: 10px;
}
.drop:nth-child(even) { top: -60px;
}
.drop:nth-child(3n - 1) { top: 0px;
}
.drop:nth-child(3n + 1) { margin-left: 40px;
}
.drop:nth-child(3n) { margin-left: 80px !important;
}
.drop:nth-child(4n) { margin-left: 120px !important;
}
.drop:nth-child(5) ~ .drop { animation-delay: 0.6s !important; left: 30px;
}
.drop:nth-child(8) ~ .drop { animation-delay: 0.3s !important; left: 0px;
}
.drop:nth-child(12) ~ .drop { animation-delay: 0s !important; left: 30px;
}
#stuff { position: absolute; margin: auto; top: 100px; left: 0; right: 0; bottom: 0; width: 200px;
}
.cloud { height: 110px; width: 110px; border-radius: 150px 150px 150px 0; position: relative;
}
.cloud, .cloud:before, .cloud:after { box-shadow: inset 20px 10px 40px -32px rgba(0, 0, 0, 0.75); background: #fff;
}
.cloud:before, .cloud:after { content: " "; display: block; position: absolute; bottom: 0px;
}
.cloud:before { height: 60px; width: 60px; border-radius: 150px; left: -30px;
}
.cloud:after { height: 130px; width: 130px; border-radius: 150px 150px 150px 0; right: -75px; z-index: -1;
}
@keyframes fall { 0% { margin-top: 90px; opacity: 1; } 60% { opacity: 1; } 100% { margin-top: 500px; opacity: 0; }
}
@keyframes float { 0% { left: 0%; } 50% { left: 100%; } 50.0001% { left: -120%; } 100% { left: 0%; }
}

Gloomy Cloud - Script Codes JS Codes

(function() {
}).call(this);
Gloomy Cloud - Script Codes
Gloomy Cloud - Script Codes
Home Page Home
Developer Elleestcrimi
Username elleestcrimi
Uploaded August 11, 2022
Rating 4.5
Size 3,769 Kb
Views 36,432
Do you need developer help for Gloomy 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!

Elleestcrimi (elleestcrimi) Script Codes
Name
Navy Present
My reading corner
Hypnotic Camera Lens
Pure CSS trustious.com Logo
Pink name card
Just another 3D maze
Crude butterfly
Fixed header using flex box
Webkeyz Scattery Logo
CSS Dynamic Width Square Div
Create amazing love letters 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!