CSS Flag – Animation Created By Amit Sheen

Share Your Love

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.

Share Your Love
Avatar photo
Lingaraj Senapati

Hey There! I am Lingaraj Senapati, the Founder of lingarajtechhub.com My skills are Freelance, Web Developer & Designer, Corporate Trainer, Digital Marketer & Youtuber.

Articles: 429

Newsletter Updates

Enter your email address below to subscribe to our newsletter