Happy New Year

✨ นางสาวขวัญพิชชา อิ่มโดด

<html>
  <head>
    <title>Let's Start
    </title>
    <style>
      body{
        margin:3em;
        text-align:center;
      }
      .bar{
        display:inline-block;
        color:white;
        padding:7em 1em 1em;
        animation:ani 3s ease-in-out infinite alternate;
        transform-origin:top;
        animation-delay: var(--i);
        box-shadow:0px -20px 20px inset #f803;
        transform:perspective(100px) rotatex(-50px);
        background:hsl(330,50%,60%);
      }
      .row{
        transform-style:preserve-3d;
        transform:perspective(100em) rotatey(30deg) rotate(1deg);
      }
      @keyframes ani{
        0% {
          transform:perspective(100px) rotatex(-50deg);
          background:hsl(330,50%,60%);
        }
        100% {
          transform:perspective(1000px) rotatex(50deg);
          background:hsl(330,60%,70%);
        }
      }
    </style>
  </head>
  <body>
    <div class="row">
      <div class="bar" style="--i:0.1s;">
        H
      </div>
      <div class="bar" style="--i:0.2s">
        A
      </div>
      <div class="bar" style="--i:0.3s">
        P
      </div>
      <div class="bar" style="--i:0.4s">
        P
      </div>
      <div class="bar" style="--i:0.5s">
        Y
      </div>
      <div class="bar" style="--i:0.6s">
        N
      </div>
      <div class="bar" style="--i:0.7s">
        E
      </div>
      <div class="bar" style="--i:0.8s">
        W
      </div>
      <div class="bar" style="--i:0.9s">
        Y
      </div>
      <div class="bar" style="--i:1s">
        E
      </div>
      <div class="bar" style="--i:1.1s">
        A
      </div>
      <div class="bar" style="--i:1.2s">
        R
      </div>
    </div>
  </body>
</html>