骰子
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
body {
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
}
.dice {
background-image: url(https://assets.codepen.io/2002878/random-dice.png);
width: 366px;
height: 366px;
background-position: 0% 100%;
animation: 1s steps(5, start) random infinite;
}
@keyframes random {
to {background-position: 100% 100%;}
}
#dice {
display: none;
}
#dice:checked + label .dice {
animation-play-state: paused;
}
</style>
</head>
<body>
<input type="checkbox" id="dice">
<label for="dice">
<div class="dice"></div></label>
</body>
</html>
