62070027 CSS Var and CalC
✨ นางสาวจันทร์กระจ่าง ลิมปนะโชคชัย
<html> <head> <title>Let's Start </title> <style> body{ background:#ffff; margin:10em; font-family:sans-serif; font-size:0; } div{ --size:calc(100vw / 10); width:var(--size); height:var(--size); background:grey; border-radius:10%; display:inline-block; background:white; background:hsl( calc(90 + var(--sec) *60),calc(5% + var(--i) *100%),60%); /* animation:ani 1s calc(var(--i)*1s) linear infinite alternate; */ animation:ani calc(10s) calc(.50s * var(--i)) infinite linear alternate; /* border:5px solid hsl( calc(90 + var(--sec) *60),calc(5% + var(--i) *100%),60%);; */ box-shadow:0px 0px 10px #0006; } @keyframes ani{ from{ width:5%; height:5%; border-radius:10%; transform:translateY(10px); transform:rotate(10deg); /* transform:scale(2); */ opacity: 60%; background:hsl(var(--sec),90%,50%); } to{ width:10%; height:10%; border-radius:50%; transform:translateY(200px); transform:rotate(360deg); /* transform:scale(1); */ opacity: 100%; } } } </style> </head> <body> <section style="--sec:0"> <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: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: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: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: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: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>