62070055 CSS Var and CalC (Branch 8539)
✨ นายฐิติพล บุญลำพันธ์
<html> <head> <title>Let's Start </title> <style> body{ background:#eee; margin:5em; font-family:sans-serif; font-size:0; } div{ animation-duration: -5s; position:relative; border-radius: 30px; --size:calc(100vw / 10); width:var(--size); height:var(--size); background:grey; /* border-radius:20%; */ display:inline-block; background:hsl(calc(100 + var(--sec)*100),100%,80%); animation:ani calc(2s) calc(.314159256s * var(--i)) infinite linear,kulipkulip 0.3s infinite alternate,tran calc(20s) calc(.314159256s * var(--i)) infinite alternate; box-shadow:0px 0px 10px #0006; border:5px solid #000; box-sizing:border-box; } @keyframes ani{ from{ transform:scale(0.2); } to{ transform:scale(1); } } @keyframes kulipkulip{ from{ border:5px solid hsl(calc(270 + var(--sec)*10),100%,50%); } to{ border:15px solid hsl(calc(var(--sec)100) , calc(var(--i)20%),50%); } } @keyframes tran { 0% {background-color:red; top:0px;} 25% {background-color:yellow; top:100px;} 50% {background-color:blue; top:150px;} 75% {background-color:green; top:100px;} 100% {background-color:red;top:0px;} } </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> </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> </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> </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> </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> </section> </body> </html>