数字轮盘效果
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效果,后续更新