用CSS-flex写个骰子

作者: D2开源组 | 来源:发表于2017-02-09 14:29 被阅读0次

用CSS-flex写个骰子
CSS-Flex
CSS-Flex
css-flex
Python 使用matplotlib模块模拟掷骰子
用shell写个“软件”
用java写个回文
iOS判断对象是否为空需考虑4种情况
12.21 用R 掷骰子
css-flex布局

上班中午休息时间试着用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就不贴了，没有什么技术难点，需要的朋友自行研究代码好了