zoukankan      html  css  js  c++  java
  • CSS:flex实现骰子的6个面

    用flex实现骰子的六个面,实现效果如下:

    实现代码如下:

    <html>
        <head>
            <style>
                body {
                    background-color: #000000;
                    display: flex;
                    justify-content: center;
                    align-items: center;
                }
                [class $= 'face'] {
                    margin: 16px;
                    padding: 4px;
                    background-color: #e7e7e7;
                     104px;
                    height: 104px;
                    -o-object-fit: contain;
                    object-fit: contain;
                    -webkit-box-shadow: inset 0 5px white, inset 0 -5px #bbb, inset 5px 0 #d7d7d7, inset -5px 0 #d7d7d7;
                    box-shadow: inset 0 5px white, inset 0 -5px #bbb, inset 5px 0 #d7d7d7, inset -5px 0 #d7d7d7;
                    border-radius: 10%;
                }
                .pip {
                    display: block;
                     24px;
                    height: 24px;
                    border-radius: 50%;
                    margin: 4px;
                    background-color: #333;
                    -webkit-box-shadow: inset 0 3px #111, inset 0 -3px #555;
                    box-shadow: inset 0 3px #111, inset 0 -3px #555;
                }
    
                .first-face {
                    display: flex;
                    justify-content: center;
                    align-items: center;
                }
                .second-face, 
                .third-face,
                .forth-face,
                .fifth-face,
                .sixth-face {
                    display: flex;
                    justify-content: space-between;
                }
                .second-face .pip:nth-of-type(2) {
                    align-self: flex-end;
                }
                .third-face .pip:nth-of-type(2) {
                    align-self: center;
                }
                .third-face .pip:nth-of-type(3) {
                    align-self: flex-end;
                }
                .forth-face .column {
                    display: flex;
                    flex-direction: column;
                    justify-content: space-between;
                }
                .fifth-face .column {
                    display: flex;
                    flex-direction: column;
                    justify-content: space-between;
                }
                .fifth-face .column:nth-of-type(2) {
                    align-self: center;
                }
                .sixth-face .column {
                    display: flex;
                    flex-direction: column;
                    justify-content: space-between;
                }
            </style>
        </head>
        <body>
            <div class="first-face">
                <span class="pip"></span>
            </div>
            <div class="second-face">
                <span class="pip"></span>
                <span class="pip"></span>
            </div>
            <div class="third-face">
                <span class="pip"></span>
                <span class="pip"></span>
                <span class="pip"></span>
            </div>
            <div class="forth-face">
                <div class="column">
                    <span class="pip"></span>
                    <span class="pip"></span>
                </div>
                <div class="column">
                    <span class="pip"></span>
                    <span class="pip"></span>
                </div>
            </div>
            <div class="fifth-face">
                <div class="column">
                    <span class="pip"></span>
                    <span class="pip"></span>
                </div>
                <div class="column">
                    <span class="pip"></span>
                </div>
                <div class="column">
                    <span class="pip"></span>
                    <span class="pip"></span>
                </div>
            </div>
            <div class="sixth-face">
                <div class="column">
                    <span class="pip"></span>
                    <span class="pip"></span>
                    <span class="pip"></span>
                </div>
                <div class="column">
                    <span class="pip"></span>
                    <span class="pip"></span>
                    <span class="pip"></span>
                </div>
            </div>
        </body>
    </html>
  • 相关阅读:
    【学习笔记】Hive
    《深入浅出数据分析》笔记
    SQL vs. HQL 语法对比
    log4net日志使用方法
    NLog日志使用方法
    VS2010,C#项目改动后无法编译
    Jquery easyui的datagrid在初始化的时候会请求两次URL?
    【硬件】Realtek RTL9210固件部分参数翻译及移动硬盘WinToGo推荐调优方案
    【小记】RedHat8(CentOS) 下连接数据库ODBC报 SSL Error:141A318A 问题
    【小记】[新手常见错误] C++ 指针的引用
  • 原文地址:https://www.cnblogs.com/ycherry/p/8184125.html
Copyright © 2011-2022 走看看