Happy New Year (Branch 3653)

✨ นายภานุพงศ์ เฉลยรัตน์

<html>
  <head>
    <title>Let's Start
    </title>
    <style>
      body{
        margin:3em;
        text-align:center;
      }
      .bar{
        display:inline-block;
        color:red;
        padding:7em 1em 1em;
        animation:pew 4s infinite alternate;
        transform-origin:top;
        animation-delay:calc(var(--i)*.2s);
        box-shadow:0px -20px 20px inset #f803;
        transform:perspective(500px) rotatex(-60deg) rotatey(10deg);
        background:hsl(45,100%,50%);
      }
      .row{
        transform-style:top;
        transform:perspective(500px) rotatez(2deg);
      }
      @keyframes pew{
        from{
          transform:perspective(500px) rotatey(-10deg) rotatex(60deg);
          background:hsl(60, 90%, 50%);
        }
        to{
          transform:perspective(500px) rotatey(-5deg) rotatex(-60deg);
			 background:hsl(40, 100%, 50%);
        }
      }
    </style>
  </head>
  <body>
    <div class="row">
      <div class="bar" style="--i:1">
        H
      </div>
      <div class="bar" style="--i:2">
        A
      </div>
      <div class="bar" style="--i:3">
        P
      </div>
      <div class="bar" style="--i:4">
        P
      </div>
      <div class="bar" style="--i:5">
        Y
      </div>
      <div class="bar" style="--i:6">
        N
      </div>
      <div class="bar" style="--i:7">
        E
      </div>
      <div class="bar" style="--i:8">
        W
      </div>
      <div class="bar" style="--i:9">
        Y
      </div>
      <div class="bar" style="--i:10">
        E
      </div>
      <div class="bar" style="--i:11">
        A
      </div>
      <div class="bar" style="--i:12">
        R
      </div>
    </div>
  </body>
</html>