62070068 Nutthawut Sukchaiyaporn
✨ NUTTHAWUT SUKCHAIYAPORN
<html> <head> <title>62070068 </title> <style> body{ background:#eee; margin:1em; font-family:sans-serif; font-size:0; } div{ --size:calc(100vw / 10); width:var(--size); height:var(--size); background:grey; /* border-radius:20%; */ display:inline-block; background:hsl(calc(200 + var(--sec)*10*var(--i)),100%,50%); animation:ani calc(.31415926535897932s) calc(.314159256535897932s * var(--i)) infinite linear,kulipkulip 1s infinite alternate, fallenLove 1s infinite; box-shadow:0px 0px 10px black; border:5px solid #000; box-sizing:border-box; } @keyframes ani{ from{ transform:rotate(0deg); } to{ transform:rotate(360deg); } } @keyframes kulipkulip{ from{ border:5px solid hsl(calc(70 + var(--sec)*10),100%,50%); } to{ border:15px solid hsl(calc(330 + var(--sec)*10),100%,50%); } } @keyframes fallenLove{ from{ --i:20; }to{ --i:300; } } </style> </head> <body> <section style="--sec:0"> <div style="--i:0"> </div> <div style="--i:1"> </div> <div style="--i:2"> </div> <div style="--i:3"> </div> <div style="--i:4"> </div> <div style="--i:5"> </div> <div style="--i:6"> </div> <div style="--i:7"> </div> <div style="--i:8"> </div> <div style="--i:9"> </div> </section> <section style="--sec:1"> <div style="--i:0"> </div> <div style="--i:1"> </div> <div style="--i:2"> </div> <div style="--i:3"> </div> <div style="--i:4"> </div> <div style="--i:5"> </div> <div style="--i:6"> </div> <div style="--i:7"> </div> <div style="--i:8"> </div> <div style="--i:9"> </div> </section> <section style="--sec:2"> <div style="--i:0"> </div> <div style="--i:1"> </div> <div style="--i:2"> </div> <div style="--i:3"> </div> <div style="--i:4"> </div> <div style="--i:5"> </div> <div style="--i:6"> </div> <div style="--i:7"> </div> <div style="--i:8"> </div> <div style="--i:9"> </div> </section> <section style="--sec:3"> <div style="--i:0"> </div> <div style="--i:1"> </div> <div style="--i:2"> </div> <div style="--i:3"> </div> <div style="--i:4"> </div> <div style="--i:5"> </div> <div style="--i:6"> </div> <div style="--i:7"> </div> <div style="--i:8"> </div> <div style="--i:9"> </div> </section> <section style="--sec:4"> <div style="--i:0"> </div> <div style="--i:1"> </div> <div style="--i:2"> </div> <div style="--i:3"> </div> <div style="--i:4"> </div> <div style="--i:5"> </div> <div style="--i:6"> </div> <div style="--i:7"> </div> <div style="--i:8"> </div> <div style="--i:9"> </div> </section> </body> </html>