title
<!DOCTYPE html> <html> <head> <meta charset="utf-8"/> <title>A prototype</title> <link href='css/main.css' rel='stylesheet'> <script src='js/main.js' defer></script> </head> <body> <div></div> <div style="--foo: 1;"></div> <div style="--foo: 2;"></div> <div style="--foo: 3;"></div> <div style="--foo: 4;"></div> <div style="--foo: 5;"></div> <div style="--foo: 6;"></div> <div style="--foo: 7;"></div> </body> </html>
:root { --foo: green; } div { background: rgba(100, 100, 0, calc(var(--foo) * .1)); height: 1em; animation-name: rotate; animation-duration: 2s; animation-iteration-count: infinite; transform-origin: top left; } @keyframes rotate{ from{transform: rotate(0deg)} to{ transform:rotate(calc(var(--foo)* -90deg))} }
snap
new
fork
download
html
css
js
output
config
➚ link to output
➚ stem gallery
➚ snap player
font size
live reload
snap mode
layout
⤷ switch
★ info and code