Cloudy Sky
How do I make an cloudy sky?
Each cloud is just one-div in CSS3. good idea for some backgrounds ;). What is a cloudy sky? How do you make a cloudy sky? This script and codes were developed by Mghayour on 31 October 2022, Monday.
Cloudy Sky - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Cloudy Sky</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div class="main_window"> <div class="cloud" data-type="white_4" style="top: 238px;" data-speed="1"></div> <div class="cloud" data-type="white_2" style="top: 252px;" data-speed="2"></div> <div class="cloud" data-type="white_1" style="top: 481px;" data-speed="3"></div> <div class="cloud" data-type="white_1" style="top: 285px;" data-speed="4"></div> <div class="cloud" data-type="white_5" style="top: 391px;" data-speed="5"></div> <div class="cloud" data-type="white_4" style="top: 410px;" data-speed="6"></div> <div class="cloud" data-type="white_6" style="top: 494px;" data-speed="7"></div> <div class="cloud" data-type="white_6" style="top: 197px;" data-speed="8"></div> <div class="cloud" data-type="white_1" style="top: 254px;" data-speed="9"></div> <div class="cloud" data-type="white_2" style="top: 108px;" data-speed="10"></div> <div class="cloud" data-type="white_5" style="top: 133px;" data-speed="11"></div> <div class="cloud" data-type="white_5" style="top: 126px;" data-speed="12"></div> <div class="cloud" data-type="white_5" style="top: 291px;" data-speed="13"></div> <div class="cloud" data-type="white_5" style="top: 515px;" data-speed="14"></div> <div class="cloud" data-type="white_6" style="top: 410px;" data-speed="15"></div> <div class="cloud" data-type="white_1" style="top: 198px;" data-speed="16"></div> <div class="cloud" data-type="white_2" style="top: 130px;" data-speed="17"></div> <div class="cloud" data-type="white_6" style="top: 274px;" data-speed="18"></div> <div class="cloud" data-type="white_6" style="top: 129px;" data-speed="19"></div> <div class="cloud" data-type="white_2" style="top: 140px;" data-speed="20"></div> <div class="cloud" data-type="white_6" style="top: 312px;" data-speed="21"></div> <div class="cloud" data-type="white_6" style="top: 258px;" data-speed="22"></div> <div class="cloud" data-type="white_2" style="top: 133px;" data-speed="23"></div> <div class="cloud" data-type="white_1" style="top: 530px;" data-speed="24"></div> <div class="cloud" data-type="white_5" style="top: 541px;" data-speed="25"></div> <div class="cloud" data-type="white_1" style="top: 313px;" data-speed="26"></div> <div class="cloud" data-type="white_1" style="top: 552px;" data-speed="27"></div> <div class="cloud" data-type="white_1" style="top: 548px;" data-speed="28"></div> <div class="cloud" data-type="white_2" style="top: 438px;" data-speed="29"></div> <div class="cloud" data-type="white_2" style="top: 516px;" data-speed="30"></div> <div class="cloud" data-type="white_5" style="top: 556px;" data-speed="31"></div> <div class="cloud" data-type="white_5" style="top: 225px;" data-speed="32"></div> <div class="cloud" data-type="white_3" style="top: 286px;" data-speed="33"></div> <div class="cloud" data-type="white_2" style="top: 416px;" data-speed="34"></div> <div class="cloud" data-type="white_2" style="top: 105px;" data-speed="35"></div> <div class="cloud" data-type="white_6" style="top: 195px;" data-speed="36"></div> <div class="cloud" data-type="white_2" style="top: 281px;" data-speed="37"></div> <div class="cloud" data-type="white_1" style="top: 291px;" data-speed="38"></div> <div class="cloud" data-type="white_4" style="top: 196px;" data-speed="39"></div> <div class="cloud" data-type="white_6" style="top: 442px;" data-speed="40"></div> </div> <script src="js/index.js"></script>
</body>
</html>
Cloudy Sky - 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: 0px; padding: 0px;
}
.cloud{ width: 200px; height: 50px; background-color: #fff; border-radius: 30px; position: absolute; top:100;
}
[data-type=white_1]:before{ content: ""; display: block; width: 50px; height: 50px; top: -20px; left: 20px; background-color: #fff; border-radius: 30px; position: absolute; box-shadow: 80px 0 0 10px #fff, 40px 0 0 20px #fff, 110px 0 0 -5px #fff;
}
[data-type=white_2]:before{ content: ""; display: block; width: 50px; height: 50px; top: -20px; left: 25px; background-color: #fff; border-radius: 30px; position: absolute; box-shadow: 40px -10px 0 20px #fff, 80px -10px 0 10px #fff, 115px -5px 0 -10px #fff;
}
[data-type=white_3]:before{ content: ""; display: block; width: 50px; height: 50px; top: -20px; left: 25px; background-color: #fff; border-radius: 30px; position: absolute; box-shadow: 40px -10px 0 15px #fff, 90px 0px 0 15px #fff;
}
[data-type=white_4]:before{ content: ""; display: block; width: 50px; height: 50px; top: -20px; left: 20px; background-color: #fff; border-radius: 30px; position: absolute; box-shadow: 80px 0 0 10px #fff, 40px 0 0 20px #fff, 110px 0 0 -5px #fff, 80px 25px 0 10px #fff, 40px 25px 0 20px #fff, 0 40px 0 -5px #fff;
}
[data-type=white_5]:before{ content: ""; display: block; width: 50px; height: 50px; top: -20px; left: 25px; background-color: #fff; border-radius: 30px; position: absolute; box-shadow: 40px -10px 0 20px #fff, 80px -10px 0 10px #fff, 115px -5px 0 -10px #fff, 20px 30px 0 20px #fff, 70px 30px 0 10px #fff, 105px 40px 0 -10px #fff;
}
[data-type=white_6]:before{ content: ""; display: block; width: 50px; height: 50px; top: -20px; left: 25px; background-color: #fff; border-radius: 30px; position: absolute; box-shadow: 40px -10px 0 15px #fff, 90px 0 0 15px #fff, 20px 30px 0 15px #fff, 80px 40px 0 15px #fff;
}
@-webkit-keyframes linemove
{
from {left:-200px;}
to {left:1456px;}
}
@-moz-keyframes linemove
{
from {left:-200px;}
to {left:1456px;}
}
@-ms-keyframes linemove
{
from {left:-200px;}
to {left:1456px;}
}
@-o-keyframes linemove
{
from {left:-200px;}
to {left:1456px;}
}
@keyframes linemove
{
from {left:-200px;}
to {left:1456px;}
}
[data-speed="1"]{ animation: linemove 44.01936s; -webkit-animation: linemove 44.01936s;
}
[data-speed="2"]{ animation: linemove 28.67113s; -webkit-animation: linemove 28.67113s;
}
[data-speed="3"]{ animation: linemove 36.99853s; -webkit-animation: linemove 36.99853s;
}
[data-speed="4"]{ animation: linemove 22.6682s; -webkit-animation: linemove 22.6682s;
}
[data-speed="5"]{ animation: linemove 21.20363s; -webkit-animation: linemove 21.20363s;
}
[data-speed="6"]{ animation: linemove 36.46404s; -webkit-animation: linemove 36.46404s;
}
[data-speed="7"]{ animation: linemove 45.58272s; -webkit-animation: linemove 45.58272s;
}
[data-speed="8"]{ animation: linemove 31.02697s; -webkit-animation: linemove 31.02697s;
}
[data-speed="9"]{ animation: linemove 23.79332s; -webkit-animation: linemove 23.79332s;
}
[data-speed="10"]{ animation: linemove 35.69691s; -webkit-animation: linemove 35.69691s;
}
[data-speed="11"]{ animation: linemove 36.87823s; -webkit-animation: linemove 36.87823s;
}
[data-speed="12"]{ animation: linemove 20.158s; -webkit-animation: linemove 20.158s;
}
[data-speed="13"]{ animation: linemove 17.34752s; -webkit-animation: linemove 17.34752s;
}
[data-speed="14"]{ animation: linemove 22.19251s; -webkit-animation: linemove 22.19251s;
}
[data-speed="15"]{ animation: linemove 25.91683s; -webkit-animation: linemove 25.91683s;
}
[data-speed="16"]{ animation: linemove 17.46605s; -webkit-animation: linemove 17.46605s;
}
[data-speed="17"]{ animation: linemove 22.15188s; -webkit-animation: linemove 22.15188s;
}
[data-speed="18"]{ animation: linemove 27.5939s; -webkit-animation: linemove 27.5939s;
}
[data-speed="19"]{ animation: linemove 40.26929s; -webkit-animation: linemove 40.26929s;
}
[data-speed="20"]{ animation: linemove 12.73873s; -webkit-animation: linemove 12.73873s;
}
[data-speed="21"]{ animation: linemove 11.34359s; -webkit-animation: linemove 11.34359s;
}
[data-speed="22"]{ animation: linemove 24.98947s; -webkit-animation: linemove 24.98947s;
}
[data-speed="23"]{ animation: linemove 43.17049s; -webkit-animation: linemove 43.17049s;
}
[data-speed="24"]{ animation: linemove 28.77146s; -webkit-animation: linemove 28.77146s;
}
[data-speed="25"]{ animation: linemove 19.03643s; -webkit-animation: linemove 19.03643s;
}
[data-speed="26"]{ animation: linemove 44.53789s; -webkit-animation: linemove 44.53789s;
}
[data-speed="27"]{ animation: linemove 26.64436s; -webkit-animation: linemove 26.64436s;
}
[data-speed="28"]{ animation: linemove 41.99245s; -webkit-animation: linemove 41.99245s;
}
[data-speed="29"]{ animation: linemove 18.44574s; -webkit-animation: linemove 18.44574s;
}
[data-speed="30"]{ animation: linemove 19.09319s; -webkit-animation: linemove 19.09319s;
}
[data-speed="31"]{ animation: linemove 34.62887s; -webkit-animation: linemove 34.62887s;
}
[data-speed="32"]{ animation: linemove 33.08773s; -webkit-animation: linemove 33.08773s;
}
[data-speed="33"]{ animation: linemove 10.0134s; -webkit-animation: linemove 10.0134s;
}
[data-speed="34"]{ animation: linemove 39.82966s; -webkit-animation: linemove 39.82966s;
}
[data-speed="35"]{ animation: linemove 36.10109s; -webkit-animation: linemove 36.10109s;
}
[data-speed="36"]{ animation: linemove 47.62616s; -webkit-animation: linemove 47.62616s;
}
[data-speed="37"]{ animation: linemove 39.53287s; -webkit-animation: linemove 39.53287s;
}
[data-speed="38"]{ animation: linemove 21.86695s; -webkit-animation: linemove 21.86695s;
}
[data-speed="39"]{ animation: linemove 48.20212s; -webkit-animation: linemove 48.20212s;
}
[data-speed="40"]{ animation: linemove 26.6844s; -webkit-animation: linemove 26.6844s;
}
.cloud{ -webkit-animation-timing-function:linear; -webkit-animation-iteration-count:infinite; animation-timing-function:linear; animation-iteration-count:infinite; -webkit-animation-delay: -50s;
}
Cloudy Sky - Script Codes JS Codes
/*
yeah it's better to use RANDOM functions ! :\
it's better to wait for 2nd cloud round
Notice that it's powered by CSS3 (not js)
Have Fun
*/
Developer | Mghayour |
Username | mghayour |
Uploaded | October 31, 2022 |
Rating | 3 |
Size | 3,041 Kb |
Views | 20,240 |
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!
Name | Size |
Avn Slider | 2,751 Kb |
An other layout | 2,569 Kb |
Download Button | 2,374 Kb |
An other menu | 1,791 Kb |
An other linear loader | 1,694 Kb |
Wp tab | 2,294 Kb |
Border-radius | 1,505 Kb |
IRan Flag | 4,485 Kb |
MG Factory | 2,396 Kb |
CSS Wave Play | 2,842 Kb |
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!
Name | Username | Size |
OnScreenAction | Ozgursagiroglu | 2,647 Kb |
IE11 Test | Boostnewmedia | 4,998 Kb |
Apex Calculator | Michaelwnelson | 2,370 Kb |
Text Blocks Over Image, Updated | KatieK2 | 3,122 Kb |
FreeCodeCamp - Simon Game | Ivhed | 8,481 Kb |
Tail rose iris lined | Kbrtrm | 1,846 Kb |
Glitchy Text Effect | Kescoe | 2,208 Kb |
Savemedia1.1 | EdsonAlcala | 2,148 Kb |
A Pen by Jim Savage | Madebyjam | 2,418 Kb |
Profile box | Daniesy | 2,766 Kb |
Surf anonymously, prevent hackers from acquiring your IP address, send anonymous email, and encrypt your Internet connection. High speed, ultra secure, and easy to use. Instant setup. Hide Your IP Now!