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 { :root { --foo: 5; } body{background:green;} div { background-color: rgba(300, 000, 0, calc(var(--foo) * 0)); background-image:url("https://www.ioniandolphinproject.org/wp-content/uploads/2021/03/Bottlenose-transparent-reverse.png"); background-size:100%; background-position:calc(var(--foo) * 1em); background-repeat:no-repeat; height: calc(var(--foo)*2em); animation: rotate 5s ease 0s infinite alternate-reverse; transform-origin: center; } @keyframes rotate{ from{transform: rotate(0deg); background-position:0px; } to{ transform:rotate(calc(var(--foo)* -90deg)); background-position:80px; } }
snap
save
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