CSS-only dice demo

dice.html

<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>