Using HTML & CSS Create Waving Indian Flag Fullscreen Animation
<!-- WELCOME ALL OF YOU ON COMPUTER SOFT SKILLS YT CHANNEL ------>
<!-- Single-file HTML, CSS web page that creates an Indian Flag with wave animation. ------>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Pure CSS Waving Indian Flag</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
background-color: #0d1117;
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
overflow: hidden;
/* Exactly 50px space on all sides */
padding: 50px;
}
/* ======= FULLSCREEN FLAG CONTAINER ======= */
.flag {
position: relative;
/* Full width and height minus the 50px space on both sides (100px total) */
width: calc(100vw - 100px);
height: calc(100vh - 100px);
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.7);
white-space: nowrap;
overflow: hidden;
display: flex;
}
.flag-element {
position: relative;
flex: 1;
height: 100%;
animation: wave 1.2s ease-in-out infinite alternate;
/* Pure CSS Tricolor Stripes */
background: linear-gradient(180deg,
#FF9933 0%, #FF9933 33.33%,
#FFFFFF 33.33%, #FFFFFF 66.66%,
#138808 66.66%, #138808 100%
);
/* Calculates waving ripple delay using CSS variable */
animation-delay: calc(var(--i) * 12ms);
}
/* ======= RESPONSIVE ASHOKA CHAKRA OVERLAY ======= */
.chakra {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
/* Dynamically scales based on viewport size */
width: 25vh;
height: 25vh;
max-width: 25vw;
max-height: 25vw;
z-index: 10;
pointer-events: none;
}
/* ======= WAVING ANIMATION ======= */
@keyframes wave {
0% {
transform: translateY(15px);
}
100% {
transform: translateY(-15px);
}
}
</style>
</head>
<body>
<!-- Fullscreen Waving Flag -->
<div class="flag">
<!-- SVG Ashoka Chakra (24 Spokes) -->
<svg class="chakra" viewBox="0 0 100 100">
<circle cx="50" cy="50" r="45" stroke="#000080" stroke-width="4" fill="none"/>
<circle cx="50" cy="50" r="6" fill="#000080"/>
<!-- 24 Spokes -->
<g stroke="#000080" stroke-width="2">
<line x1="50" y1="50" x2="50" y2="5"/><line x1="50" y1="50" x2="50" y2="95"/>
<line x1="50" y1="50" x2="5" y2="50"/><line x1="50" y1="50" x2="95" y2="50"/>
<line x1="50" y1="50" x2="18.18" y2="18.18"/><line x1="50" y1="50" x2="81.82" y2="81.82"/>
<line x1="50" y1="50" x2="81.82" y2="18.18"/><line x1="50" y1="50" x2="18.18" y2="81.82"/>
<line x1="50" y1="50" x2="10.87" y2="32.64"/><line x1="50" y1="50" x2="89.13" y2="67.36"/>
<line x1="50" y1="50" x2="32.64" y2="10.87"/><line x1="50" y1="50" x2="67.36" y2="89.13"/>
<line x1="50" y1="50" x2="67.36" y2="10.87"/><line x1="50" y1="50" x2="32.64" y2="89.13"/>
<line x1="50" y1="50" x2="89.13" y2="32.64"/><line x1="50" y1="50" x2="10.87" y2="67.36"/>
<line x1="50" y1="50" x2="6.7" y2="41.32"/><line x1="50" y1="50" x2="93.3" y2="58.68"/>
<line x1="50" y1="50" x2="41.32" y2="6.7"/><line x1="50" y1="50" x2="58.68" y2="93.3"/>
<line x1="50" y1="50" x2="58.68" y2="6.7"/><line x1="50" y1="50" x2="41.32" y2="93.3"/>
<line x1="50" y1="50" x2="93.3" y2="41.32"/><line x1="50" y1="50" x2="6.7" y2="58.68"/>
</g>
</svg>
<!-- Pure CSS Slices (No JavaScript Required) -->
<div class="flag-element" style="--i:0"></div>
<div class="flag-element" style="--i:1"></div>
<div class="flag-element" style="--i:2"></div>
<div class="flag-element" style="--i:3"></div>
<div class="flag-element" style="--i:4"></div>
<div class="flag-element" style="--i:5"></div>
<div class="flag-element" style="--i:6"></div>
<div class="flag-element" style="--i:7"></div>
<div class="flag-element" style="--i:8"></div>
<div class="flag-element" style="--i:9"></div>
<div class="flag-element" style="--i:10"></div>
<div class="flag-element" style="--i:11"></div>
<div class="flag-element" style="--i:12"></div>
<div class="flag-element" style="--i:13"></div>
<div class="flag-element" style="--i:14"></div>
<div class="flag-element" style="--i:15"></div>
<div class="flag-element" style="--i:16"></div>
<div class="flag-element" style="--i:17"></div>
<div class="flag-element" style="--i:18"></div>
<div class="flag-element" style="--i:19"></div>
<div class="flag-element" style="--i:20"></div>
<div class="flag-element" style="--i:21"></div>
<div class="flag-element" style="--i:22"></div>
<div class="flag-element" style="--i:23"></div>
<div class="flag-element" style="--i:24"></div>
<div class="flag-element" style="--i:25"></div>
<div class="flag-element" style="--i:26"></div>
<div class="flag-element" style="--i:27"></div>
<div class="flag-element" style="--i:28"></div>
<div class="flag-element" style="--i:29"></div>
<div class="flag-element" style="--i:30"></div>
<div class="flag-element" style="--i:31"></div>
<div class="flag-element" style="--i:32"></div>
<div class="flag-element" style="--i:33"></div>
<div class="flag-element" style="--i:34"></div>
<div class="flag-element" style="--i:35"></div>
<div class="flag-element" style="--i:36"></div>
<div class="flag-element" style="--i:37"></div>
<div class="flag-element" style="--i:38"></div>
<div class="flag-element" style="--i:39"></div>
<div class="flag-element" style="--i:40"></div>
</div>
</body>
</html>
No comments:
Post a Comment