用CSS-flex写个骰子
2017-02-09 本文已影响0人
D2开源组
上班中午休息时间试着用flex做了一个CSS骰子，效果如下：
demo
主要是flex布局，写的时候用到的还有scss和一点vue，vue只是用作生成结构。
HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<link rel="stylesheet" href="/css/style.css">
<script src="js/vue.js" charset="utf-8"></script>
</head>
<body>
<div id="app">
<div class="group">
<div class="box" v-bind:class="className" v-html="cellHtml"></div>
</div>
<div class="control">
<input type="number" v-model="cellNumber">
</div>
</div>
</body>
<script type="text/javascript">
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 = '<i></i>';break;
case 2:returnHtml = '<i></i><i></i>';break;
case 3:returnHtml = '<i></i><i></i><i></i>';break;
case 4:returnHtml = '<div><i></i><i></i></div><div><i></i><i></i></div>';break;
case 5:returnHtml = '<div><i></i><i></i></div><div><i></i></div><div><i></i><i></i></div>';break;
case 6:returnHtml = '<i></i><i></i><i></i><i></i><i></i><i></i>';break;
}
return returnHtml;
}
}
})
</script>
</html>
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就不贴了，没有什么技术难点，需要的朋友自行研究代码好了
