CSS Var and CalC (Copy 8751)
✨ นายภัทธพล ปลั่งดี
<html> <head> <title>Let's Start </title> <style> body{ background:#000; margin:1em; font-family:sans-serif; font-size:0; } div{ --size:calc(100vw / 10); width:var(--size); height:var(--size); display:inline-block; background:hsl(calc(72 * var(--sec) + 7.2 * var(--i)),80%,50%); border: 2px dotted hsl(calc(72 * var(--sec) + 7.2 * var(--i)),100%,50%); border-radius: 50%; box-sizing:border-box; transform:scale(.4); animation:ani calc(1s) calc(.3s * var(--i) + 0.3s * var(--sec)) infinite linear alternate,kulipkulip calc(1s) calc(.35s * var(--i) + 0.3s * var(--sec)) infinite linear alternate; } @keyframes ani{ from{ transform:scale(.4); } to{ transform:scale(1); } } @keyframes kulipkulip{ from{ border-radius:0%; } to{ border-radius:75%; } } </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>