This post describes CSS Flag animation by Amit Sheen flies the Awesome flag made of many, many flapping divs in this CSS animation.
CSS Flag By Codepen:
See the Pen CSS Flag by Amit Sheen (@amit_sheen) on CodePen.
In HTML:
<div class="flag"> <div class="flap"> <div class="flap"> <div class="flap"> <div class="flap"> <div class="flap"> <div class="flap"> <div class="flap"> <div class="flap"> <div class="flap"> <div class="flap"> <div class="flap"> <div class="flap"> <div class="flap"> <div class="flap"> <div class="flap"> <div class="flap"> <div class="content"></div> </div> <div class="content"></div> </div> <div class="content"></div> </div> <div class="content"></div> </div> <div class="content"></div> </div> <div class="content"></div> </div> <div class="content"></div> </div> <div class="content"></div> </div> <div class="content"></div> </div> <div class="content"></div> </div> <div class="content"></div> </div> <div class="content"></div> </div> <div class="content"></div> </div> <div class="content"></div> </div> <div class="content"></div> </div> <div class="content"></div> </div> <div class="pole"></div> </div>
In CSS:
@import url('https://fonts.googleapis.com/css2?family=Orelega+One&display=swap'); *, *::before, *::after { padding: 0; margin: 0 auto; box-sizing: border-box; } $speed: 3s; body { font-family: 'Orelega One', cursive; background-image: linear-gradient(#ccc, #999); color: #fffc; min-height: 100vh; display: flex; justify-content: center; align-items: center; font-size: 20px; perspective: 20em; } .flag { position: relative; width: 0; height: 16em; background-color: #fff; transform: translateX(-6em) rotateX(-30deg) rotateY(15deg); transform-style: preserve-3d; } .flap { position: absolute; top: 0; left: calc(100% - 1px); width: calc(1em + 1px); height: 9em; box-shadow: 0px 0px 1em #0003 inset; transform-style: preserve-3d; transform-origin: left; animation: flap $speed infinite ease-in-out; $s: '&'; @for $i from 0 to 16 { #{$s} { animation-delay: $speed / 16 * $i * -2; background-image: linear-gradient(90deg, hsl(120 + 10 * $i, 50%, 35%), hsl(120 + 10 * ($i + 1), 50%, 35%)); --v: #{$i * 2.5}deg; & .content::before { left: #{$i * -0.25}em; } & .content::after { left: #{$i * -0.5}em; } } $s: $s + ' > .flap'; } &::after { content: ''; position: absolute; top: 16em; left: 50%; width: 200%; height: 1em; background-color: #999; transform: translate(-50%, -50%) rotateX(90deg); border-radius: 0.5em; filter: blur(0.6em); } } .content { position: absolute; top: 0; left: 0; width: 100%; height: 100%; overflow: hidden; transform: translateZ(0.5px); text-shadow: 0 0 0.5em #000; &::before { content: 'CSS'; position: absolute; bottom: 40%; left: 0; width: 4em; text-align: center; font-size: 4em; } &::after { content: 'is awesome'; position: absolute; top: 50%; left: 0; width: 8em; text-align: center; font-size: 2em; white-space: pre; line-height: 0.8; animation: afterText $speed * 2.2 infinite step-end; @keyframes afterText { 0% { content: 'is awesome'; } 50% { content: 'is better \a with animations'; } } } } @keyframes flap { 0%, 100% { transform: rotateY(calc(var(--v) * -1)); } 50% { transform: rotateY(var(--v)); } } .pole { content: ''; position: absolute; top: 0; right: 0; width: 1em; height: 100%; border-radius: 0 0 0.5em 0.5em / 0 0 0.3em 0.3em; background-image: linear-gradient(#7777, #6660, #555), linear-gradient(90deg, #777, #fff, #555); &::before { content: ''; position: absolute; top: 100%; left: 50%; width: 4em; height: 4em; transform: translate(-50%, -50%) rotateX(90deg); background-image: radial-gradient(#0004, #0000 60%); } &::after { content: ''; position: absolute; top: 0%; left: 50%; width: 1em; height: 0.4em; border-radius: 50%; transform: translate(-50%, -50%); background-image: radial-gradient(circle at top, #aaa, #333); } }
In JavaScript:
//No JAvaScript
Please share and comments on this post and wants to improve WhatsApp Us.