console 命令行工具 X clear

console

<body>
    <div class="card">
        <div class="fold"></div>
        <div class="fold"></div>
        <div class="fold"></div>
        <div class="fold"></div>
        <div class="fold"></div>
    </div>
</body>

$size: 95vw;
$folds: 5;

$skew: 15deg;
$crunch: 0.6;
$duration: 4s;
$delay: 1s;

body {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100vh;
    animation: crunch $duration $delay ease-in-out infinite;

}

.card {
    display: flex;
    width: $size;
    height: 840 / 1920 * $size;
}

.fold {
    flex: 1;
    background: url('https://pixabay.com/get/55e0d3404d50ab14ead9837ec72836761722dfe05a52774f7d2d7ad4.jpg');
    background-size: cover;

    @for $i from 1 through $folds {
        &:nth-child(#{$i}) {
            background-position: ($i - 1) / ($folds - 1) * 100%;
        }
    }

    &:first-child {
        border-radius: 2vw 0 0 2vw
    }

    &:last-child {
        border-radius: 0 2vw 2vw 0;
    }

    animation: $duration $delay ease-in-out infinite;

    &:nth-child(odd) {
        animation-name: odd-fold; 
    }

    &:nth-child(even) {
        animation-name: even-fold; 
    }
}

@keyframes crunch {
    50% {
        transform: scaleX($crunch);
    }
}

@keyframes odd-fold {
    50% {
        transform: skewY($skew);
        filter: brightness(0.75);
    }
}

@keyframes even-fold {
    50% {
        transform: skewY(-$skew);
        filter: brightness(1.25);
    }
}