数字轮盘效果

数字轮盘效果

css

//shuzi
.box-num{
    width: 190px;
    height: 80px;
    border: 5px solid #e8e8e8;
    border-radius: 5px;
    display: flex;
}
.box-inner{
    flex: 1 0 auto;
    width: 60px;
    height: 100%;
    background-color: #eeeeee;
    box-shadow:0 0 2px 2px #ADADAD inset;
}
.box-num-inside{
    width: 40px;
    height: 55px;
    background-color: #847980;
    margin: 12px auto;
    border-radius: 5px;
    text-align: center;
    span{
        color: #FFFFFF;
        font-size: 44px;
        line-height: 55px;
    }
}

html

<h3>您的得分</h3>
            <!--<img src="12.png" />-->
            <div class="box-num marginauto boxer">
                <div class="box-inner">
                    <div class="box-num-inside">
                        <span>0</span>
                    </div>
                </div>
                <div class="box-inner">
                    <div class="box-num-inside">
                        <span>1</span>
                    </div>
                </div>
                <div class="box-inner">
                    <div class="box-num-inside">
                        <span>8</span>
                    </div>
                </div>
            </div>

效果

查看演示效果以及代码

还可以加上一些css动画，js效果，后续更新