title
A prototype
:root{ --u:20px; } .eyes{ display:flex; width:calc(var(--u)*6); justify-content:space-between; position: absolute; left: calc(50% - var(--u)*9.2) ; top: 48%; } .eye{ border-radius:100%; height:calc(var(--u)*3); width:calc(var(--u)*2); border:calc(var(--u)/5) solid black; position:relative; overflow:hidden; animation:blink steps(1) 5s infinite alternate-reverse; } .ball{ position:absolute; bottom: calc(var(--u)/1.5); left:calc(var(--u)/2); background:black; width:calc(var(--u)); height:calc(var(--u)); border-radius:100%; animation:roll ease 6s infinite alternate-reverse, ballblink steps(1) 5s infinite alternate-reverse; } @keyframes roll{ 0% {left:calc(var(--u)/-3);} 70% {left:calc(var(--u)*1.2);} } @keyframes blink{ 99% {border-color:white;} } @keyframes ballblink{ 99% { height:5px; width:calc(var(--u)*3); border-radius: 5px; left:-20px; bottom: 20px; } }
snap
save
new
fork
download
html
css
js
output
gallery
config
➚ link to output
➚ snap player
font size
live reload
snap mode
layout
⤷ switch
★ info and code