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> <input type="checkbox" id="toggle-menu" name="toggle-menu" value="menu-visibility" hidden/> <label for="toggle-menu"> <figure class="btn span-nochecked"> <img src="https://www.startpage.com/av/proxy-image?piurl=https%3A%2F%2Fi.ytimg.com%2Fvi%2FMhjtimkRQts%2Fmaxresdefault.jpg&sp=1730282506T5e467ac49839822ff31691cab4d99c346e412fa5c97f309d8645c952b6f5e626" alt="" /> </figure> </label> <div class="el"></div> <div class="el2"></div> </body> </html>
img{ width: 100%; } figure{ margin: 0; } .btn{ position: absolute; width: 150px; height: 150px; z-index: 20; top: 100px; left: 100px; } .el{ width: 30px; height: 30px; background-color: red; border-radius: 50%; position: absolute; top: 100px; left: 100px; transition: all 0.4s linear; } .el2{ width: 30px; height: 30px; background-color: orange; border-radius: 50%; position: absolute; top: 100px; left: 100px; transition: all 0.5s ease-in-out; } input:checked ~ .el { top: 10px; left: 10px; } input:checked ~ .el2 { top: 10px; left: 100px; }
snap
new
fork
download
html
css
js
output
config
➚ link to output
➚ list all stems
➚ snap player
font size
live reload
snap mode
layout
⤷ switch
★ info and code