纯css代码制作掷骰子

css部分

body{
        display: flex;
        justify-content: center;
        align-items: center;
        min-height: 100vh;
    }
    .dice{
        background: url("random-dice.webp");
        width: 366px;
        height: 366px;
        background-position: 0% 100%;
        animation: random 0.2s steps(6,jump-none) infinite;
    }
    @keyframes random {
        to{
            background-position: 100% 100%;
        }
    }
    #dice{
        display: none;
    }
    #dice:checked + label .dice{
        animation-play-state: paused;
    }
    .dice::before{
        content: "?";
        background-color: rgba(255,255,255,0.8);
        width: inherit;
        height: inherit;
        display: flex;
        justify-content: center;
        align-items: center;
        font-size: 320px;
        backdrop-filter: blur(20px);
        -webkit-backdrop-filter: blur(20px);
        border-radius: 60px;
    }
    #dice:checked + label .dice::before{
        display: none;
    }
    
    

html部分