Skip to content

Instantly share code, notes, and snippets.

@yne yne/dice.html
Created Dec 28, 2019

Embed
What would you like to do?
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
You can’t perform that action at this time.