返回顶部

收藏

Don't tap the white block

更多
@font-face {
    font-family: "digital";
    src: url(DIGITALDREAMSKEWNARROW-webfont.woff);
}

body {
    position: fixed;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    width: 400px;
    margin: auto;
    display: -webkit-flex;
    display: flex;
    -webkit-flex-direction: column;
    flex-direction: column;
    box-sizing: border-box;
    padding: 10px 0 5px;

    @media (max-width: 400px) {
        width: 100%;
        padding: 5px 0 0;
    }

    header {
        font-size: 50px;
        font-family: digital, monospace;
        height: 50px;
        text-align: center;
        line-height: 50px;
    }
    &.success header {
        color: green;
    }
    &.fail header {
        color: red;
    }

    main {
        -webkit-flex: 1;
        flex: 1;
        position: relative;
        overflow-y: hidden;

        border: 1px solid;
        box-sizing: border-box;
        margin-top: 5px;

        div::before {
            text-align: center;
            font: 40px monospace;
            display: block;
            height: 40px;
            position: absolute;
            top: 0;
            bottom: 0;
            left: 0;
            right: 0;
            margin: auto;
            pointer-events: none;
        }

        & > div.row {
            height: 25%;
            display: -webkit-flex;
            display: flex;
            -webkit-flex-direction: row;
            flex-direction: row;
            position: absolute;
            top: 0;
            width: 100%;
            will-change: transform;
            transition: .05s all;
            box-sizing: border-box;

            & > div.column {
                height: 100%;
                width: 25%;
                -webkit-flex: 1;
                flex: 1;
                border: 1px solid;
                box-sizing: border-box;
                position: relative;
                transition: background .05s;

                &.error {
                    background: red;
                }

                &.ok {
                    background: green;
                }
            }

            @for $row from 0 through 5 {
                &[data-row="#{$row}"] {
                    -webkit-transform: translateY(($row - 1) * 100%);
                    transform: translateY(($row - 1) * 100%);
                }
            }
            &[data-row="0"] {
                transition: none;
            }

            @for $idx from 1 through 4 {
                &[data-next="#{$idx}"] {
                    & > div:nth-child(#{$idx}) {
                        background: black;
                        color: white;
                    }

                    &::before {
                        content: attr(data-count);
                        left: 25% * ($idx - 1);
                        right: 25% * (4 - $idx);
                        color: white;
                        z-index: 1;
                    }
                }
            }

            &[data-row="4"], &[data-row="5"] {
                @for $idx from 1 through 4 {
                    &[data-next="#{$idx}"] > div:nth-child(#{$idx}) {
                        background: lightgray;
                    }
                }

                &:not([data-next]) {
                    background: yellow;

                    & > div:nth-child(1)::before {
                        content: "J";
                    }
                    & > div:nth-child(2)::before {
                        content: "K";
                    }
                    & > div:nth-child(3)::before {
                        content: "L";
                    }
                    & > div:nth-child(4)::before {
                        content: ";";
                    }
                }
            }
        }
    }
}

标签:css

收藏

0人收藏

支持

0

反对

0

相关聚客文章
  1. Airen 发表 2018-01-22 15:04:17 CSS Grid 布局揭秘
  2. Airen 发表 2018-01-22 15:29:12 CSS的display:contents
  3. 博主 发表 2018-01-17 00:00:00 CSS实现水平垂直居中的方式
  4. 博主 发表 2018-01-13 14:50:14 CSS: 跨平台 CSS 中文字体解决方案
  5. 李森 发表 2018-01-14 07:21:03 [webpack] vue init webpack your-project的引入css报错的问题
  6. 博主 发表 2017-12-02 00:00:00 Web Animation API - 在 JavaScript 中释放 CSS keyframes
  7. Airen 发表 2018-01-09 15:37:38 CSS Grid和Flexbox解决实际的布局问题
  8. Airen 发表 2018-01-06 18:23:35 理解CSS布局和BFC
  9. 博主 发表 2017-12-20 16:32:46 CSS selector simplifier regular expression in Java
  10. xubiao.zhuang 发表 2017-12-28 15:08:19 杨浩涌:将军赶路,莫追小兔
  11. Aaron 发表 2017-12-23 16:00:00 谈谈css的加载及加载循序
  12. 设计 达人 发表 2017-12-20 13:30:28 小创意:圣诞球切换开关

发表评论