清华大佬耗费三个月吐血整理的几百G的资源，免费分享！....>>>

@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: ";";
                    }
                }
            }
        }
    }
}