纯CSS3的图书翻页动画

用户注册

投稿取消

文章分类:

还能输入300字

上传中....

热门文章更多>>

标签更多>>

word左右居中纵向分布 word左右居中对齐 word左右居中对齐怎么设置 word标题回车后为正文 word标题回车后直接分页 word标题回车后中间空了好大一段 word里面行距怎么调整无法缩小 word里面行距一直很大 word里面行距怎么设置在哪里 word试卷格式文档怎么打印 word试卷格式排版 word中隐藏文字打印 word中隐藏文字快捷键 word中隐藏文字在哪里

专题更多>>

最新文章更多>>

放屁后自己不要笑

纯CSS3的图书翻页动画

$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;
            }
        }
    }
}