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