下面是编程之家 jb51.cc 通过网络收集整理的代码片段。

编程之家小编现在分享给大家，也给大家做个参考。

$count: 50;
@for $idx from 1 through $count {
    @keyframes #{'anime-' + $idx} {
        0% {
            transform: skewY(0deg) scaleX(1);
            z-index: $idx;
        }

        50% {
            z-index: 1000 - $idx;
        }

        100% {
            transform: skewY(180deg) scaleX(-1);
            z-index: 1000 - $idx;
        }
    }
}

body {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;

    & > div {
        position: absolute;
        left: 0;
        right: 0;
        top: 0;
        bottom: 0;
        width: 400px;
        height: 300px;
        margin: auto;

        & > div {
            width: 50%;
            Box-sizing: border-Box;
            border: 1px solid;
            position: absolute;
            top: 0;
            bottom: 0;

            &.left {
                border-right: none;
                left: 0;
                transform-origin: right;
            }

            &.right {
                border-left: none;
                right: 0;
                transform-origin: left;
                display: none;
            }
        }

        @for $idx from 1 through $count {
            &:nth-child(#{$idx}) > div {
                background-color: rgb(random(256)-1,random(256)-1,random(256)-1);
                animation: #{'anime-' + $idx} 1s (.05s * ($count - $idx) + 1s) linear forwards;
            }
        }
    }
}

以上是编程之家(jb51.cc)为你收集整理的全部代码内容，希望文章能够帮你解决所遇到的程序开发问题。

如果觉得编程之家网站内容还不错，欢迎将编程之家网站推荐给程序员好友。