สุรชล เปรมเปราะ 62070209
✨ นายสุรชล เปรมเปราะ
<html> <head> <title>Let's Start </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:red; border-radius:40%; display:inline-block; background:hsl(calc(300 + var(--sec)*15) ,calc(5% + var(--i)*10%),50%); animation:ani calc(1.1s) calc(.1s * var(--i)) infinite linear; box-shadow:10px 10px 10px #0006; } @keyframes ani{ from{ transform:scale(50%); } to{ transform:scale(100%); } } </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> <section style="--sec:5"> <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:6"> <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>