.dice{ width:200px; height:200px; background-color:#ddd; border-radius:10px; position:relative; } .dot{ width:50px; height:50px; border-radius:50%; background-color:#222; position:absolute; top:0; bottom:0; margin:auto; } .dot1{ left:25%; } .dot2{ left:75%; } .dot3{ left:25%; top:50%; } .dot4{ left:75%; top:50%; } .dot5{ left:25%; bottom:0; } .dot6{ left:75%; bottom:0; }
首先,大家需要定义一个骰子容器,也就是一个长方形。然后,大家用圆点来表示骰子的点数。在代码中,大家通过定义一个圆点类,来使所以圆点样式的代码简化。接下来,大家要分别定义每一个点的位置,这里采用了绝对定位的方式,每个点的位置都需要手动调整。
通过以上的代码,大家就可以画出一个基本的色子了。如果要让它更加完美,大家还可以为它添加一些动画效果,比如在骰子被点击时,会随机旋转数次,并随机点出一个数字。这里就不再赘述了。