Creating Dynamic Weather animations using HTML CSS
Explore the world of captivating weather animations created using pure HTML and CSS. In this tutorial, we'll unveil the secrets behind crafting a variety of weather conditions, from clear skies to thunderstorms, using minimalistic code.
Must Read: Interactive Quiz Web App using HTML CSS JS Project | With Levels
Let's dive into the HTML structure of this visually enchanting weather animation.
<div class="main-container flex-c">
<div class="weather-container flex-c">
<div class="weather">
<div class="sun"></div>
</div>
<div class="weather">
<div class="sun"></div>
<div class="cloud flex-c middle"><span class="inner"></span></div>
</div>
<div class="weather">
<div class="cloud flex-c left"><span class="inner"></span></div>
<div class="sun"></div>
<div class="cloud flex-c middle"><span class="inner"></span></div>
</div>
<div class="weather cloudy">
<div class="cloud flex-c left"><span class="inner"></span></div>
<div class="cloud flex-c middle"><span class="inner"></span></div>
</div>
<div class="weather rainy">
<div class="cloud flex-c left"><span class="inner"></span></div>
<div class="cloud flex-c middle"><span class="inner"></span></div>
<div class="rain">
<span></span>
<span></span>
<span></span>
</div>
</div>
<div class="weather stormy">
<div class="cloud flex-c left"><span class="inner"></span></div>
<div class="cloud flex-c middle"><span class="inner"></span></div>
<div class="lightning">⚡</div>
<div class="rain">
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
</div>
</div>
<div class="weather">
<div class="cloud flex-c left"><span class="inner"></span></div>
<div class="full-moon"></div>
<div class="cloud flex-c middle"><span class="inner"></span></div>
</div>
<div class="weather">
<div class="full-moon"></div>
<div class="cloud flex-c middle"><span class="inner"></span></div>
</div>
<div class="weather">
<div class="half-moon"></div>
</div>
<div class="weather">
<div class="full-moon"></div>
</div>
</div>
</div>Our weather animation canvas is enclosed within a <div> with the "main-container" class, ensuring perfect alignment on any webpage.
Weather Elements
Within the "weather-container," an array of weather elements comes to life. Each element portrays a different weather condition, making our animation visually appealing and dynamic. Here's a glimpse of what we've created:
- Sunny Days: The simplicity of a sunbeam radiates joy.
- Partly Cloudy: The sun peeks through fluffy white clouds.
- Cloudy Skies: Overcast conditions with no rain.
- Rainy Weather: Raindrops fall gracefully from the clouds.
- Stormy Skies: Thunder and lightning electrify the atmosphere.
- Clear Nights: Starry skies with a gentle breeze.
- Moonlit Nights: The moonlight casts a serene glow.
- Half Moon: A crescent moon graces the night.
- Full Moon: The moon takes center stage.
Read More: Exceptional Login Form using HTML, CSS and JS | See Magic on Hover
It utilizes various CSS properties and animations to depict different weather conditions, including sunny, cloudy, rainy, stormy, and moon phases.
.flex-c {
display: flex;
justify-content: center;
align-items: center;
}
.main-container {
min-width: 200px;
min-height: 100vh;
}
.weather-container {
height: auto;
padding: 10px;
grid-gap: 30px;
flex-wrap: wrap;
max-width: 600px;
}
.weather {
width: 90px;
height: 90px;
position: relative;
}
.sun {
z-index: 1;
width: 50%;
height: 50%;
position: relative;
border-radius: 50%;
background: linear-gradient(orange, yellow);
box-shadow: inset 0px 0px 10px 0px rgb(255, 99, 2), 0px 0px 10px 2px rgb(255, 99, 2) inset, 0px 0px 3px 0px rgb(255, 99, 2);
}
.cloud {
width: 100%;
height: 50%;
position: absolute;
filter: drop-shadow(0px 0px 2px #1a1a1b);
}
.left {
left: -40%;
z-index: 0;
top: -8%;
}
.middle {
top: 10%;
z-index: 2;
}
.inner {
width: 40%;
height: 80%;
position: relative;
background: #E9E9EA;
border-radius: 35px 35px 0 0;
}
.inner::before,
.inner::after {
content: '';
width: 65%;
height: 65%;
bottom: 0px;
border-radius: 50%;
position: absolute;
background: #E9E9EA;
}
.inner::before {
left: -12px;
}
.inner::after {
right: -12px;
}
.rain {
top: 25%;
width: 90%;
height: 50%;
z-index: -1;
left: -15px;
display: flex;
position: relative;
transform: rotate(20deg);
justify-content: space-evenly;
}
.rainy .inner,
.rainy .inner::before,
.rainy .inner::after {
background: rgb(192, 192, 192);
}
.rain span {
width: 3%;
height: 35%;
border-radius: 50%;
animation: rain .7s linear infinite;
background: linear-gradient(white, #49bad8, white);
}
.rain span:nth-child(2) {
animation-delay: 0.4s;
}
.rain span:nth-child(3) {
animation-delay: .2s;
}
.rain span:nth-child(4) {
animation-delay: .6s;
}
.rain span:nth-child(5) {
animation-delay: .7s;
}
.lightning {
left: -5px;
z-index: 1;
width: 100%;
height: 100%;
bottom: -30px;
font-size: 20px;
position: absolute;
}
.lightning::before {
content: '';
width: 50%;
height: 50%;
opacity: 0;
position: absolute;
filter: blur(15px);
animation: lightning 3s linear infinite;
background: linear-gradient(white, transparent);
}
.stormy span {
animation-duration: 250ms;
}
.full-moon {
z-index: 1;
width: 50%;
height: 50%;
position: relative;
border-radius: 50%;
background: linear-gradient(white, #858585);
box-shadow: inset 0px 0px 13px 2px #696767, -3px -1px 5px 0px #434343;
}
.half-moon {
top: -5%;
left: 30%;
width: 50%;
height: 50%;
border-radius: 50%;
position: absolute;
box-shadow: -10px 6px 0 2px #bdbdbd, -14px 9px 7px 1px #4e4d4d;
}
@keyframes rain {
0% {
opacity: 0;
}
50% {
opacity: .7;
}
100% {
transform: translateY(60px);
opacity: 0;
}
}
@keyframes lightning {
0% {
opacity: 0;
}
10% {
opacity: 1;
}
20%,
30% {
opacity: 0;
}
100% {
opacity: 0;
}
}The code showcases creative styling techniques, such as gradients, box shadows, and keyframe animations, to simulate these weather patterns within a designated container.
- Resetting Styles: The code begins by resetting default margin, padding, and box-sizing for all elements, ensuring a consistent starting point for styling.
- Flexbox Layout: The centered-flex class is defined to apply flexbox styling, enabling elements to be centered both horizontally and vertically.
- Weather Container: Within the main-container, there's a weather-container that holds various weather elements.
- Sun: A sun element is created with gradients and box shadows to give it a realistic appearance.
- Clouds: Clouds are designed using div elements with inner divs for added detail. They're positioned to create different weather scenarios.
- Rain: In the "rainy" scenario, raindrops are represented by small circles animated to create a falling rain effect.
- Lightning: The "stormy" scenario includes lightning represented by a stylized "⚡" character with a flashing effect created using keyframes.
- Moon Phases: Full moon and half-moon elements are designed with gradients and shadows to resemble celestial bodies.
- Keyframes: Keyframes animations are used for raindrops falling and lightning flashing.
In this artistic journey, we've uncovered the magic of HTML and CSS to craft stunning weather animations. Each element in our animation portrays a different weather scenario, from the serenity of clear nights to the drama of thunderstorms.
This tutorial is a testament to the creative possibilities that HTML and CSS offer, allowing you to bring a touch of weather-inspired beauty to your web projects. Stay tuned for future posts, where we'll explore further enhancements and interactivity for these captivating weather animations.
