title
A prototype
: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