html css做骰子,用CSS-flex写个骰子

上班中午休息时间试着用flex做了一个CSS骰子，效果如下：

demo

主要是flex布局，写的时候用到的还有scss和一点vue，vue只是用作生成结构。

HTML

var vm = new Vue({

el:'#app',

data:{

cellNumber:6

},

computed:{

numberNum:function(){

var old = this.cellNumber;

if(old == ''){

old = 0;

}

if(old > 6){

old = 6;

}

return parseInt(old);

},

className:function(){

return 'cell' + this.numberNum

},

cellHtml:function(){

var returnHtml = '';

switch (this.numberNum) {

case 1:returnHtml = '';break;

case 2:returnHtml = '';break;

case 3:returnHtml = '';break;

case 4:returnHtml = '

case 5:returnHtml = '

case 6:returnHtml = '';break;

}

return returnHtml;

}

}

})

SCSS

body{

margin: 0px;

}

.control{

display: flex;

justify-content: center;

align-items: center;

height: $topbarHeight;

background-color: #222;

position: absolute;

left: 0px;

right: 0px;

input{

height: 40px;

line-height: 40px;

width: 300px;

border-radius: 5px;

padding: 0px;

margin: 0px;

background-color: rgba(#000,0.2);

color: #FFF;

text-align: center;

font-size: 20px;

border: 0px;

outline: none;

}

}

.group{

position: absolute;

top: $topbarHeight;

bottom: 0px;

left: 0px;

right: 0px;

background-color: #333;

display: flex;

justify-content: center;

align-items: center;

.box{

height: $boxSize;

width: $boxSize;

/* box: */

background: #F0F0F0;

box-shadow: 0 2px 20px 0 rgba(0,0,0,0.05), 0 5px 10px 0 rgba(0,0,0,0.10), inset 0 0 0 5px rgba(203,203,203,0.50);

border-radius: 20px;

display: flex;

padding: 40px;

i{

display: block;

height: 60px;

width: 60px;

border-radius: 50%;

background-image: linear-gradient(-135deg, #737373 0%, #3B3B3B 100%);

box-shadow: 0 1px 1px 1px rgba(255,255,255,0.50), inset 0 1px 3px 0 rgba(0,0,0,0.50);

}

&.cell1{

justify-content: center;

align-items: center;

i{

height: 100px;

width: 100px;

/* Oval Copy: */

background-image: linear-gradient(-135deg, #FF7E7E 0%, #FF0000 100%);

box-shadow: 0 1px 1px 1px rgba(255,255,255,0.50), inset 0 1px 3px 0 rgba(0,0,0,0.50);

}

}

&.cell2{

justify-content: space-between;

i{

&:nth-child(2){

align-self: flex-end;

}

}

}

&.cell3{

justify-content: space-between;

i{

&:nth-child(2){

align-self: center;

}

&:nth-child(3){

align-self: flex-end;

}

}

}

&.cell4{

flex-direction: column;

justify-content: space-between;

div{

display: flex;

flex-direction: row;

justify-content: space-between;

}

}

&.cell5{

flex-direction: column;

justify-content: space-between;

div{

display: flex;

flex-direction: row;

justify-content: space-between;

&:nth-child(2){

justify-content: center;

}

}

}

&.cell6{

flex-direction: column;

flex-wrap: wrap;

align-content: space-between;

justify-content: space-between;

}

}

}

然后生成一堆CSS就不贴了，没有什么技术难点，需要的朋友自行研究代码好了