CSS3动画网页整体翻转特效

顾陌 发布时间:2015-08-13 分类:Web 阅读:1159次 添加评论


CSS3动画网页整体翻转特效。代码:

<style>body.Roll-rotateY {
    animation: page_rotateY 7s ease;
    -webkit-animation: page_rotateY 7s ease;
  }
  @keyframes page_rotateY {
    from {
        transform: rotateY(0deg);
        -ms-transform: rotateY(0deg);
        -moz-transform: rotateY(0deg);
        -webkit-transform: rotateY(0deg);
        -o-transform: rotateY(0deg);
    }
    29%,71% {
        transform: rotateY(180deg);
        -ms-transform: rotateY(180deg);
        -moz-transform: rotateY(180deg);
        -webkit-transform: rotateY(180deg);
        -o-transform: rotateY(180deg);
    }
    to {
        transform: rotateY(360deg);
        -ms-transform: rotateY(360deg);
        -moz-transform: rotateY(360deg);
        -webkit-transform: rotateY(360deg);
        -o-transform: rotateY(360deg);
    }
}
@-webkit-keyframes page_rotateY {
    from {
        transform: rotateY(0deg);
        -ms-transform: rotateY(0deg);
        -moz-transform: rotateY(0deg);
        -webkit-transform: rotateY(0deg);
        -o-transform: rotateY(0deg);
    }
    29%,71% {
        transform: rotateY(180deg);
        -ms-transform: rotateY(180deg);
        -moz-transform: rotateY(180deg);
        -webkit-transform: rotateY(180deg);
        -o-transform: rotateY(180deg);
    }
    to {
        transform: rotateY(360deg);
        -ms-transform: rotateY(360deg);
        -moz-transform: rotateY(360deg);
        -webkit-transform: rotateY(360deg);
        -o-transform: rotateY(360deg);
    }
}</style>

页面加载完毕给Body添加class
<script>$(document).ready(function(){$('body').addClass("Roll-rotateY");});</script>


关键字词: css3动画网页翻转

暂无留言

发表评论:

◎欢迎您的参与讨论。