css在移动端翻页动画效果图

CSS在移动端翻页动画效果图的应用非常广泛，它可以使得我们的网页有更加生动和有趣的体验。接下来，我们就来介绍几个常见的CSS翻页动画效果图。

/* 使用CSS3的transiton属性实现翻页效果 */
.page {
    backface-visibility: hidden;
    transition: transform 0.6s;
}

.page.turn {
    transform: rotateY(180deg);
}

使用CSS3的transition属性可以轻松地实现翻页的效果，我们只需要对需要翻页的元素设置transition属性并指定时间，再通过添加相应的class来触发翻页动画即可，这种效果实现起来非常简单。

/* 使用CSS3的animation属性实现3D翻转效果 */
.page {
    animation-name: flip;
    animation-duration: 0.6s;
    animation-iteration-count: 1;
    transform-style: preserve-3d;
}

@keyframes flip {
    from { transform: rotateY(0); }
    to { transform: rotateY(180deg); }
}

除了使用transition属性之外，我们也可以使用CSS3的animation属性来实现3D翻转效果，这种效果可以让页面元素在翻转时更加生动，动画效果也更加出彩。

/* 使用CSS+jQuery实现翻页效果 */
.current-page {
    position: absolute;
    top: 0;
    left: 0;
}

.next-page {
    position: absolute;
    top: 0;
    left: 100%;
    z-index: -1;
}

.animate-page {
    -webkit-transform: translate(-100%,0);
    transform: translate(-100%,0);
    -webkit-animation: animatePage 0.6s;
    animation: animatePage 0.6s;
}

@keyframes animatePage {
    0% {
        -webkit-transform: translate(-100%,0);
        transform: translate(-100%,0);
    }
    100% {
        -webkit-transform: translate(0,0);
        transform: translate(0,0);
    }
}

最后，我们来介绍一种使用CSS+jQuery实现翻页效果的方法，这种方法既有CSS3的炫酷效果又能够在低版本的浏览器中兼容，而且也比较容易实现。我们可以先将下一页的内容设置为绝对定位，并将其放到当前页的右边，然后再通过在下一页上添加类名来触发CSS3的动画效果，这样可以使得下一页以翻页的形式滑动到当前页的位置。