Celebrating Diwali with Code: A Dazzling HTML and CSS Animation
Diwali, the festival of lights, is a time for joy, celebration, and the vibrant glow of lamps illuminating homes. In the spirit of this festive occasion, let's explore a captivating Diwali animation created using HTML and CSS.
The HTML Structure
The animation is encapsulated within a <div> with the class "container." Inside it, two main components contribute to the visual spectacle: the "wishes-container" and the "diya-container." Additionally, a link to the code's YouTube tutorial is provided.
<div class="container">
<!-- Wishes Container -->
<div class="wishes-container">
<!-- Lights Animation -->
<div class="lights lights-1"></div>
<div class="lights lights-2"></div>
<!-- Diwali Wishes -->
<div class="wishes">
<h3>Happy</h3>
<h3>Diwali</h3>
</div>
</div>
<!-- Diya Container -->
<div class="diya-container">
<!-- Diya Animation -->
<div class="diya">
<!-- Diya Flames -->
<div class="line-1"></div>
<div class="line-2"></div>
<div class="dots"></div>
<!-- Diya Inner Flame -->
<div class="inside">
<div class="flame"></div>
</div>
</div>
The CSS Magic
The styling, defined in the accompanying CSS, brings the animation to life. The background creates a festive ambiance with a radial gradient, and each component is meticulously designed for a visually stunning effect.
* {
padding: 0;
margin: 0;
box-sizing: border-box;
}
body {
background-color: rgb(255,249,47);
background-size: 3em 3em;
background-image: radial-gradient(
transparent 1.25em,
#3b2a62 1.25em,
#3b2a62 1.5em,
transparent 1.5em
),
radial-gradient(
transparent 1.25em,
#3b2a62 1.25em,
#3b2a62 1.5em,
transparent 1.5em
);
background-position: 0 0, 1.5em 1.5em;
}
.container {
height: 100vh;
width: 37.5em;
position: absolute;
transform: translate(-50%, -50%);
top: 50%;
left: 50%;
overflow: hidden;
}
.wishes-container {
width: 28.12em;
height: 28.12em;
background: linear-gradient(90deg, rgba(255,249,47,1) 0%, rgba(150,137,13,1) 28%, rgba(24,62,18,1) 53%, rgba(219,255,0,1) 77%, rgba(224,196,34,1) 100%, rgba(126,83,255,1) 100%, rgba(230,27,212,1) 100%, rgba(82,16,72,1) 100%);
border-radius: 50%;
position: absolute;
transform: translate(-50%, -50%);
top: calc(50% - 5.25em);
left: calc(50% - 1.25em);
box-shadow: 0 0 3.43em rgba(14, 2, 40, 0.7);
}
.lights {
height: 1.25em;
width: 1.25em;
background-color: #432286;
border-radius: 50%;
position: absolute;
}
.lights-1 {
left: 13.43em;
top: 1.25em;
box-shadow: 0 24.37em #432286, 11.87em 11.87em #432286,
-11.87em 11.87em #432286;
animation: lights1 2s infinite;
}
@keyframes lights1 {
49% {
background-color: #432286;
box-shadow: 0 24.37em #432286, 11.87em 11.87em #432286,
-11.87em 11.87em #432286;
}
50% {
background-color: #f4c631;
box-shadow: 0 24.37em #f4c631, 11.87em 11.87em #f4c631,
-11.87em 11.87em #f4c631;
}
100% {
background-color: #f4c631;
box-shadow: 0 24.37em #f4c631, 11.87em 11.87em #f4c631,
-11.87em 11.87em #f4c631;
}
}
.lights-2 {
left: 5.31em;
top: 5.31em;
box-shadow: 16.25em 0 #432286, 0 16.25em #432286, 16.25em 16.25em #432286;
animation: lights2 2s 1s infinite;
}
@keyframes lights2 {
49% {
background-color: #432286;
box-shadow: 16.25em 0 #432286, 0 16.25em #432286, 16.25em 16.25em #432286;
}
50% {
background-color: purple;
box-shadow: 16.25em 0 #f4c631, 0 16.25em #f4c631, 16.25em 16.25em #f4c631;
}
100% {
background-color: #f4c631;
box-shadow: 16.25em 0 #f4c631, 0 16.25em #f4c631, 16.25em 16.25em #f4c631;
}
}
.wishes {
height: 100%;
width: 100%;
font-family: "Courgette", cursive;
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
color: #ffffff;
font-size: 3.75em;
line-height: 1.6em;
animation: wishes 2s 3s forwards;
transform: scale(0);
transform-origin: 50% 50%;
}
@keyframes wishes {
100% {
transform: scale(1);
}
}
.diya-container {
height: 25em;
width: 25em;
position: absolute;
transform: translate(-50%, -50%);
top: calc(50% + 37.5em);
left: calc(50% + 9.37em);
animation: diya 3s forwards;
}
@keyframes diya {
100% {
top: calc(50% + 1.1em);
}
}
.diya {
height: 9.37em;
width: 18.75em;
background: radial-gradient(circle, rgba(63,94,251,1) 0%, rgba(252,70,107,1) 100%);
border-radius: 0 0 9.37em 9.37em;
position: absolute;
margin: auto;
left: 0;
right: 0;
bottom: 0;
overflow: hidden;
box-shadow: 0 0 2.18em rgba(14, 2, 40, 0.4);
}
.inside {
width: 18.75em;
height: 3.75em;
background: linear-gradient(90deg, rgba(117,109,7,1) 0%, rgba(255,222,0,1) 49%, rgba(134,78,1,1) 100%);
border-radius: 50%;
position: absolute;
margin: auto;
left: 0;
right: 0;
bottom: 7.5em;
}
.flame {
height: 10.62em;
width: 10.62em;
background: linear-gradient(90deg, rgba(246,227,0,1) 0%, rgba(253,0,0,1) 50%, rgba(252,176,69,1) 100%);
border-radius: 10em 0;
transform: rotate(-45deg);
position: absolute;
margin: auto;
left: 0;
right: 0;
bottom: 2.25em;
animation: scale-up 2s infinite;
}
@keyframes scale-up {
50% {
transform: rotate(-45deg) scale(1.05);
bottom: 2.62em;
}
}
.flame:after {
content: "";
position: absolute;
height: 7.5em;
width: 7.5em;
background-color: #f4c631;
border-radius: 7.5em 0;
position: absolute;
bottom: 0;
}
.line-1,
.line-2 {
position: absolute;
height: 3.75em;
width: 20em;
border: none;
border-bottom: 0.5em solid red;
border-radius: 50%;
left: -0.62em;
}
.line-2 {
top: 3.75em;
}
.dots {
height: 3.75em;
width: 20em;
border: none;
border-bottom: 0.62em dotted #f4c631;
position: absolute;
border-radius: 50%;
top: 1.87em;
left: -0.62em;
}
a {
display: block;
position: absolute;
width: 100%;
font-size: 1.8em;
text-align: center;
padding: 1em 0;
border-radius: 0.5em;
transform: translateY(-50%);
top: calc(50% + 12em);
color: #6031c0;
text-decoration: none;
font-family: "Poppins", sans-serif;
font-weight: 600;
}
.fab {
color: #ff0000;
}
@media screen and (max-width: 600px) {
.container {
font-size: 8.5px;
}
}
Bringing Diwali to the Web
The CSS keyframes "lights1" and "lights2" handle the dynamic changes in color, creating a flickering effect reminiscent of festive lights. The "wishes" element gracefully appears with a scaling animation, and the "flame" within the diya dances with a captivating flicker.
Feel free to explore the detailed code and animations, and watch the magic unfold as you celebrate Diwali with this delightful HTML and CSS creation. May your festival be as bright and joyous as this digital representation!
Live Preview Of Diwali Animation
See the Pen Happy Diwali by Codewithshobhit (@Codewithshobhit) on CodePen.
No comments:
Post a Comment