CSS-only dice demo
<style> | |
@keyframes roll { | |
00%{content:"⚀"} | |
16%{content:"⚁"} | |
33%{content:"⚂"} | |
50%{content:"⚃"} | |
66%{content:"⚄"} | |
84%{content:"⚅"} | |
100%{content:"⚀"} | |
} | |
*{margin:0} | |
[type=checkbox]{line-height: 1;} | |
.roll:after{ | |
cursor:pointer; | |
background: white; | |
font-size: 90vmin; | |
animation: roll .3s infinite; | |
content:"!" | |
} | |
.roll:checked:after{animation-play-state: paused;} | |
</style> | |
<input type=checkbox class=roll> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment