e9 Happy New Year (Branch 4165) เสร็จแล้ว
✨ นางสาวจุฑามาศ ชนาฐิติกุล
<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: ani 3s calc(var(--i)*0.1s) infinite alternate; transform-origin: top; /* animation-delay: calc(var(--i)*0.1s); */ box-shadow:0px -20px 20px inset #f803; transform:perspective(1000px) rotatex(-70deg); background:hsl(45,100%,50%); } .row{ transform-style:top; transform:perspective(1000px); } @keyframes ani{ from{ transform:perspective(1000px) rotatex(-70deg); /* background:yellowgreen; */ } to{ transform:perspective(1000px) rotatex(80deg); /* background:black; */ } } </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>