1）此demo利用了swiper框架，animat动画库，还有设置js代码来做到自适应移动端，转换单位是rem，与px转换是/100

2）此素材在千图网使用会员下载原创psd，谢谢提供的h5设计稿的作者，利用此设计稿我做成这demo，仅供参考与学习，有做的不好纠正与体谅；

3）demo里面使用的动画animate，有些是利用了第三方动画库，不过大部分是自己自定义写的动画效果；不过一般设置动画都很大程度是根据设计稿的

主题来构思设置啥样的动画效果比较好。

程序运行效果
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

完整代码
index.html

<!DOCTYPE html>
    <html>
    <head>
        <meta charset="UTF-8"/>
        <meta name="apple-mobile-web-app-capable" content="yes" />
        <meta name="apple-mobile-web-app-status-bar-style" content="black" />
        <meta name="format-detection"content="telephone=no, email=no" />
        <meta name="renderer" content="webkit">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="HandheldFriendly" content="true">
        <meta name="MobileOptimized" content="640">
        <meta name="screen-orientation" content="portrait">
        <meta name="x5-orientation" content="portrait">
        <meta name="full-screen" content="yes">
        <meta name="x5-fullscreen" content="true">
        <meta name="browsermode" content="application">
        <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1" />
        <title>H5宣传页--中秋佳节</title>
        <link rel="stylesheet" href="css/swiper.min.css">
        <link href="css/index.css" rel="stylesheet"/>
        <link href="css/animate.css" rel="stylesheet"/>
        <link rel="stylesheet" href="css/loading.css">
    </head>
    <body>

      <div class="loadwrap wrap go" style="display:block;">
        <div class="loader bar"> <!-- google now -->
            <div class="blue"></div>
            <div class="yellow"></div>
            <div class="green"></div>
            <div class="red"></div>
        </div>

        <div class="caseBlanche_logo">
            <!--<img src="#" />-->
        </div>
        <div class="loader circle"> <!-- gmail -->
            <div class="blue"></div>
            <div class="red"></div>
            <div class="yellow"></div>
            <div class="green"></div>
        </div>

        <div class="cLoad">
        <canvas id="c"></canvas>
        </div>

        <div id="load">
        <i><span>0</span>%</i>
        </div>
    </div>



    <div class="swiper-container">
        <a class="arr"><img src="images/arr.png"></a>
        <img class="music play" src="images/music2.png"/>
        <div class="swiper-wrapper">
            <div class="swiper-slide" style="display:block;">
                <section class="page_common page_1">
                    <img src="images/page_sunny.png" class="page_sunny hide">
                    <img src="images/page_beauty.png" class="page_beauty hide">
                    <img src="images/moutain.png" class="moutain hide">
                    <!--<div class="moutain"></div>-->
                    <img src="images/page_titleZ.png" class="page_titleZ hide">
                    <img src="images/page_titleQ.png" class="page_titleQ hide">
                    <img src="images/page_titleY.png" class="page_titleY hide">
                    <img src="images/page_titleE.png" class="page_titleE hide">
                    <img src="images/page_titleYY.png" class="page_titleYY hide">
                    <img src="images/page_text.png" class="page_text hide">
                    <img src="images/page_leveas.png" class="page_leveas hide">
                </section>


            </div>
            <div class="swiper-slide" style="display: block;">

                <section class="page_common page_2">
                    <img src="images/page2_lamp.png" class="page2_lamp hide">
                    <img src="images/page2_cute.png" class="page2_cute hide">
                    <img src="images/page2_text.png" class="page2_text hide">
                    <img src="images/page2_text2.png" class="page2_text2 hide">
                    <img src="images/page2_text3.png" class="page2_text3 hide">
                    <img src="images/page2_text4.png" class="page2_text4 hide">
                </section>

            </div>

            <div class="swiper-slide" style="display: block;">

                <section class="page_common page_3">
                    <img src="images/page3_text.png" class="page3_text hide">
                    <img src="images/page3_text2.png" class="page3_text2 hide">
                    <img src="images/page3_text3.png" class="page3_text3 hide">
                    <img src="images/page3_text4.png" class="page3_text4 hide">
                    <img src="images/page3_text5.png" class="page3_text5 hide">
                    <img src="images/page3_text6.png" class="page3_text6 hide">
                    <img src="images/page3_text7.png" class="page3_text7 hide">
                </section>

            </div>

            <div class="swiper-slide" style="display: block;">

                <section class="page_common page_4">
                    <img src="images/page4_text.png" class="page4_text hide">
                    <img src="images/page4_text2.png" class="page4_text2 hide">
                    <img src="images/page4_text3.png" class="page4_text3 hide">
                    <img src="images/btnLine.png" class="btnLine"/>
                    <img src="images/page1_btn.png" class="page1_btn" id="btn"/>
                </section>

            </div>

            <div class="swiper-slide" style="display: block;">

                <section class="page_common page_5">
	    <img src="images/page5_text3.png" class="page5_text3 hide">
                    <img src="images/page5_text2.png" class="page5_text2 hide">
                    <img src="images/page5_text.png" class="page5_text hide">
                </section>

            </div>

        </div>
    </div>

   <!--music-->
   <audio id="audios" src="#" loop autoplay></audio>

    <script src="js/jquery-2.1.3.min.js"></script>
    <script src="js/swiper.min.js"></script>
    <script src="js/resize.js"></script>
    <script src="js/loadImg.js"></script>
   <script src="js/index.js"></script>

   <script>
//       <!--移动端自适应-->
       (function(doc, win) {
           var docEl = doc.documentElement,
               resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',
               recalc = function() {
                   var clientWidth = docEl.clientWidth;
                   if(!clientWidth) return;
                   docEl.style.fontSize = 100 * (clientWidth / 640) + 'px';
               };
           if(!doc.addEventListener) return;
           win.addEventListener(resizeEvt, recalc, false);
           doc.addEventListener('DOMContentLoaded', recalc, false);
       })(document, window);
   </script>

    <script>
//        <!--音乐-->
        document.addEventListener('DOMContentLoaded', function () {
            function audioAutoPlay() {
                var audio = document.getElementById("audios");
                audio.play();
                document.addEventListener("WeixinJSBridgeReady", function () {
                    audio.play();
                }, false);

                audio.addEventListener("ended", function (event) {
                    $(".music").removeClass('play');
                }, false);

                $(".music").on("touchstart",function(){
                    if(!audio.paused){
                        audio.pause();
                        $(this).removeClass('play');

                    }
                    else {
                        audio.play();
                        $(this).addClass('play');
                        }
                });
            }
            audioAutoPlay();
        });
    </script>

      <!--<script>-->
      <!--&lt;!&ndash;moutain&ndash;&gt;-->
      <!--var index=$('.moutain').index();-->
      <!--var n=2;-->
      <!--$('.moutain').animate({-->
      <!--opactiy:1,-->
      <!--left:n+1-->
      <!--},4000);-->
      <!--</script>-->

    </body>
    </html>

index.css

/*reset*/
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video { margin: 0; padding: 0; border: 0; font: inherit; vertical-align: baseline; }
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display: block; }
ol, ul { list-style: none; }
blockquote, q { quotes: none; }
blockquote:before, blockquote:after, q:before, q:after { content: ''; content: none; }
table { border-collapse: collapse; border-spacing: 0; }
* { tap-highlight-color: rgba(0, 0, 0, 0); -webkit-tap-highlight-color: rgba(0, 0, 0, 0); -ms-tap-highlight-color: rgba(0, 0, 0, 0); -webkit-box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; box-sizing: border-box; background-size: contain; background-repeat: no-repeat; }
body{ font-family: "Microsoft YaHei";line-height: 1; }
input, textarea { outline: 0; resize: none; }
a{ display: block; height: 100%; text-decoration: none; }
img{ width: 100%;vertical-align: top;}
html,body {width:100%; height:100%;margin:0;padding:0;}

/*music*/
.music{position:absolute;width:.31rem;height:.31rem;z-index:2;top:0.75rem;right:0.625rem; z-index:99;}
.play{-webkit-animation:music 1.5s linear infinite;animation:music 1.5s linear infinite;}
a.arr{position:absolute;z-index:100; bottom:0.25rem;left:50%; margin-left:-.325rem; width:.65rem; height:.51rem; -webkit-animation:arr2 1s linear infinite;animation:arr2 1s linear infinite;}
@-webkit-keyframes arr2{
    0%{-webkit-transform:translateY(0);transform:translateY(0);opacity:1;}
    100%{-webkit-transform:translateY(-30px);transform:translateY(-30px);opacity:0;}
}
@keyframes arr2{
    0%{-webkit-transform:translateY(0);transform:translateY(0);opacity:1;}
    100%{-webkit-transform:translateY(-30px);transform:translateY(-30px);opacity:0;}
}
@keyframes music{
    0%{-webkit-transform:rotate(0deg);transform:rotate(0deg);}
    100%{-webkit-transform:rotate(360deg);transform:rotate(360deg);}
}

@-webkit-keyframes music{
    0%{-webkit-transform:rotate(0deg);transform:rotate(0deg);}
    100%{-webkit-transform:rotate(360deg);transform:rotate(360deg);}
}

/*Loading CSS*/
.loadwrap{  width: 100%;height: 100%;background-color:#000;position: absolute;z-index: 99;}
#caseBlanche {  height:1.5rem;  width :1.5rem;  float : left;  position: absolute;  z-index: 99;  left: 0;right: 0;top: -17%;bottom: 0;margin: auto;}
/*#caseBlanche #load {height:1.5rem; width:1.5rem; color : #fff;font-family : calibri;text-align : center;position : absolute;top: .88rem;font-size:0.24rem;line-height:.5rem;text-align: center;}*/
#load{
    position:absolute;
    top:38%;
    left:48%;
}
#load i{height: 100%;display: inline-block;width: 100%;text-align: center;line-height: 1.84rem;font-size: .16rem;}
/*#load{position:absolute;top: -17%;bottom: 0;}*/
.loading{position: absolute;top:1.712rem; width: 100%; color:#fff;font-size:0.24rem;text-align: center;}

.caseBlanche_logo img{
    width:2.81rem;
    position: absolute;
    left:50%;
    margin-left:-1.41rem;
    top:28%;
    /*top:-3rem;*/
}
canvas{
    width:4rem;
    height:3rem;
}
.cLoad {
    width:4rem;
    height:3rem;
    display: block;
    position: absolute;
    left:50%;
    top:30%;
    margin-left: -2rem;
}
/*swiper*/
body {
    font-family: "Microsoft YaHei";
    font-size: .14rem;
    color:#000;
    margin: 0;
    padding: 0;
    width:100%;
    height:100%;
    overflow: hidden;
}
.swiper-container {
    width: 100%;
    height: 100%;
}
.swiper-slide {
    /*text-align: center;*/
    font-size: .18px;
    background: #fff;

    /* Center slide text vertically */
    display: -webkit-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    -webkit-justify-content: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    -webkit-align-items: center;
    align-items: center;
    overflow: hidden;
}
/*隐藏*/
.hide{
    opacity:0;
}
.page_common{
    width:100%;
    height:100%;
    position:relative;
}
.page_1{
    background-color: #000;
    background:url(../images/page_bg.jpg) center top no-repeat;
    background-size:cover;
}
.page_2{
    background-color: #000;
    background:url(../images/page2_bg.jpg) center top no-repeat;
    background-size:cover;
}
.page_3{
    background-color: #000;
    background:url(../images/page3_bg.jpg) center top no-repeat;
    background-size:cover;
}
/*@-webkit-keyframes scale {*/
     /*0%{*/
         /*opacity: 1;*/
         /*-webkit-transform: scale(1);*/
     /*}*/
     /*100%{*/
         /*opacity: 1;*/
         /*-webkit-transform: scale(1.04);*/
     /*}*/
 /*}*/
/*@keyframes scale {*/
    /*0%{*/
        /*opacity: 1;*/
        /*-webkit-transform: scale(1);*/
    /*}*/
    /*100%{*/
        /*opacity: 1;*/
        /*-webkit-transform: scale(1.04);*/
    /*}*/
/*}*/
.page_4{
    background-color: #000;
    background:url(../images/page4_bg.jpg) center top no-repeat;
    background-size:cover;
}
.page_5{
    background-color: #000;
    background:url(../images/page5_bg.jpg) center top no-repeat;
    background-size:cover;
    animation:scale 1.4s .4s linear infinite;
    -webkit-animation:scale 1.4s .4s linear infinite;
}

@-webkit-keyframes scale {
    0%{
        opacity: 1;
        height:100%
    }
    50%{
        opacity: 1;
        height:104%
    }
    100%{
        opacity: 1;
        height:108%;
    }
}
@keyframes scale {
    0%{
        opacity: 1;
        height:100%
    }
    50%{
        opacity: 1;
        height:104%
    }
    100%{
        opacity: 1;
        height:108%;
    }
}





/*page1*/
.page_beauty{
    width: 3.71rem;
    position: absolute;
    left:1.74rem;
    top:.84rem;
}
.moutain{
    /*width: 100%;*/
    width: 200%;
    /*min-width: 6.4rem;*/
    height:1.33rem;
    position: absolute;
    left:0;
    top:6.8rem;
    opacity: .6;
    /*background: url('../images/moutain.png') repeat-x;*/
    /*background-size: 100%;*/
    animation: scroll 5s 2s linear infinite;
    -webkit-animation: scroll 8s 2s linear infinite;
}
/*流动的水*/
@keyframes scroll{
    from{}
    to{margin-left: -100%;}
}
@-webkit-keyframes scroll{
    from{}
    to{margin-left: -100%;}
}
.page_titleZ{
    width: .53rem;
    position: absolute;
    left:1.78rem;
    top:6.4rem;
}
.page_titleQ{
    width: .7rem;
    position: absolute;
    left:2.3rem;
    top:6.46rem;
}
.page_titleY{
    width: .45rem;
    position: absolute;
    left:3.04rem;
    top:6.46rem;
}
.page_titleE{
    width: .64rem;
    position: absolute;
    left:3.66rem;
    top:6.46rem;
}
.page_titleYY{
    width: .51rem;
    position: absolute;
    left:4.36rem;
    top:6.46rem;
}
.page_text{
    width: 4.21rem;
    position: absolute;
    left:1.28rem;
    top:7.22rem;
}
.page_leveas{
    width: 1.84rem;
    position: absolute;
    left:0;
    bottom:0;
}
.page_sunny{
    width: 5.6rem;
    position: absolute;
    left:.5rem;
    top:.14rem;
}

/*page2*/
.page2_lamp{
    width:1.19rem;
    position: absolute;
    left:5.16rem;
    top:1.58rem;
}
.page2_cute{
    width:2.41rem;
    position: absolute;
    left:0;
    bottom:0;
}
.page2_text{
    width:.38rem;
    position: absolute;
    left:4.84rem;
    top:3.6rem;
}
.page2_text2{
    width:.39rem;
    position: absolute;
    left:4.08rem;
    top:4.2rem;
}
.page2_text3{
    width:.38rem;
    position: absolute;
    left:3.38rem;
    top:5rem;
}
.page2_text4{
    width:.38rem;
    position: absolute;
    left:2.6rem;
    top:5.6rem;
}

/*page3*/
.page3_text{
    width:1rem;
    position: absolute;
    left:2.61rem;
    top:.48rem;
}
.page3_text2{
    width:.38rem;
    position: absolute;
    left:1.58rem;
    top:.46rem;
}
.page3_text3{
    width:.48rem;
    position: absolute;
    left:1.32rem;
    top:1.46rem;
}
.page3_text4{
    width:.48rem;
    position: absolute;
    left:1.7rem;
    top:2.2rem;
}
.page3_text5{
     width:.34rem;
     position: absolute;
     left:1.58rem;
     top:3.02rem;
 }
.page3_text6{
    width:.4rem;
    position: absolute;
    left:.6rem;
    top:1.58rem;
}
.page3_text7{
    width:.62rem;
    position: absolute;
    left:.6rem;
    top:2.98rem;
}

/*page4*/
.page4_text{
    width:.97rem;
    position: absolute;
    left:5.12rem;
    top:.34rem;
}
.page4_text2{
    width:.52rem;
    position: absolute;
    left:4.26rem;
    top:.34rem;
}
.page4_text3{
    width:.67rem;
    position: absolute;
    left:3.44rem;
    top:.98rem;
}
.btnLine{
    width:5.67rem;
    position: absolute;
    left:50%;
    margin-left: -2.835rem;
    top:8.3rem;
}
.page1_btn{
    width:.92rem;
    position: absolute;
    left:1.72rem;
    top:8rem;
    animation:btn .6s linear infinite;
    -webkit-animation:btn .6s linear infinite;
}
@-webkit-keyframes btn {
    0%{
        opacity: 1;
        left:1.72rem;
    }
    100%{
        opacity: 1;
        left:1.82rem;
    }
}
@keyframes btn {
    0%{
        opacity: 1;
        left:1.72rem;
    }
    100%{
        opacity: 1;
        left:1.82rem;
    }
}
/*page5*/
.page5_text2{
    width:1.52rem;
    position: absolute;
    left:2.34rem;
    top:.38rem;
}
.page5_text{
    width:4.37rem;
    position: absolute;
    left:.9rem;
    top:1.54rem;
}

/*animate infinite*/

.swiper-slide-active .page_sunny{
    -webkit-animation:flash 1.6s .4s linear infinite;
    animation:flash 1.6s .4s linear infinite;
}
.swiper-slide-active .page_beauty{
    -webkit-animation:smallbig .6s .6s linear forwards,beauty 1.2s .8s linear infinite;
    animation:smallbig .6s .6s linear forwards,beauty 1.2s .8s linear infinite;
}
@-webkit-keyframes beauty {
    0%{
        left:1.64rem;
        top:.74rem;
    }
    50%{
        left:1.74rem;
        top:.84rem;
    }
    100%{
        left:1.84rem;
        top:.94rem;
    }
}
@keyframes beauty {
    0%{
        left:1.64rem;
        top:.74rem;
    }
    50%{
        left:1.74rem;
        top:.84rem;
    }
    100%{
        left:1.84rem;
        top:.94rem;
    }
}

.swiper-slide-active .page_titleZ{
    -webkit-animation:tree .4s 1.2s linear forwards;
    animation:tree .4s 1.2s linear forwards;
}
.swiper-slide-active .page_titleQ{
    -webkit-animation:tree .4s 1.5s linear forwards;
    animation:tree .4s 1.5s linear forwards;
}
.swiper-slide-active .page_titleY{
    -webkit-animation:tree .4s 1.7s linear forwards;
    animation:tree .4s 1.7s linear forwards;
}
.swiper-slide-active .page_titleE{
    -webkit-animation:tree .4s 1.9s linear forwards;
    animation:tree .4s 1.9s linear forwards;
}
.swiper-slide-active .page_titleYY{
    -webkit-animation:tree .4s 2.1s linear forwards;
    animation:tree .4s 2.1s linear forwards;
}
@-webkit-keyframes tree {
    0% {
        opacity: 0;
        -webkit-transform: scale(0);
        -webkit-transform-origin:center bottom;
    }
    100%{
        opacity:1;
        -webkit-transform: scale(1);
        -webkit-transform-origin:center bottom;
    }
}
@keyframes tree {
    0% {
        opacity: 0;
        transform: scale(0);
        transform-origin:center bottom;
    }
    100%{
        opacity:1;
        transform: scale(1);
        transform-origin:center bottom;
    }
}
.swiper-slide-active .page_text{
    -webkit-animation:txt 1s 2.5s linear forwards;
    animation:txt 1s 2.5s linear forwards;
}
@-webkit-keyframes txt {
    0% {
        opacity: 0;
        top:8.22rem;
    }
    100%{
        opacity:1;
        top:7.22rem;
    }
}
@keyframes txt {
    0% {
        opacity: 0;
        top:8.22rem;
    }
    100%{
        opacity:1;
        top:7.22rem;
    }
}

.swiper-slide-active .page_leveas{
    -webkit-animation:leveas 1.6s 1.6s linear infinite;
    animation:leveas 1.6s 1.6s linear infinite;
}
@-webkit-keyframes leveas{
    0%{
        -webkit-transform: rotate3d(0, 0, 1, 0deg);
        transform: rotate3d(0, 0, 1, 0deg);
        -webkit-transform-origin: bottom left;
        transform-origin: bottom left;
        -webkit-animation-timing-function: ease-in-out;
        animation-timing-function: ease-in-out;
        opacity: 1;
    }
    50%{
        -webkit-transform: rotate3d(0, 0, 1, -6deg);
        transform: rotate3d(0, 0, 1, -6deg);
        -webkit-transform-origin: bottom left;
        transform-origin: bottom left;
        -webkit-animation-timing-function: ease-in-out;
        animation-timing-function: ease-in-out;
        opacity: 1;
    }
    100%{
        -webkit-transform: rotate3d(0, 0, 1, 0deg);
        transform: rotate3d(0, 0, 1, 0deg);
        -webkit-transform-origin: bottom left;
        transform-origin: bottom left;
        -webkit-animation-timing-function: ease-in-out;
        animation-timing-function: ease-in-out;
        opacity: 1;
    }
}
@keyframes leveas{
    0%{
        -webkit-transform: rotate3d(0, 0, 1, 0deg);
        transform: rotate3d(0, 0, 1, 0deg);
        -webkit-transform-origin: bottom left;
        transform-origin: bottom left;
        -webkit-animation-timing-function: ease-in-out;
        animation-timing-function: ease-in-out;
        opacity: 1;
    }
    50%{
        -webkit-transform: rotate3d(0, 0, 1, -6deg);
        transform: rotate3d(0, 0, 1, -6deg);
        -webkit-transform-origin: bottom left;
        transform-origin: bottom left;
        -webkit-animation-timing-function: ease-in-out;
        animation-timing-function: ease-in-out;
        opacity: 1;
    }
    100%{
        -webkit-transform: rotate3d(0, 0, 1, 0deg);
        transform: rotate3d(0, 0, 1, 0deg);
        -webkit-transform-origin: bottom left;
        transform-origin: bottom left;
        -webkit-animation-timing-function: ease-in-out;
        animation-timing-function: ease-in-out;
        opacity: 1;
    }

}

/*page2*/
.swiper-slide-active .page2_lamp{
    -webkit-animation:lampS .6s .3s linear forwards,lamp 1.2s .9s linear infinite;
    animation:lampS .6s .3s linear forwards,lamp 1.2s .9s linear infinite;
}
@-webkit-keyframes lampS {
    0%{
        opacity: 1;
        -webkit-transform: scale(1);
    }
    100%{
        opacity: 1;
        -webkit-transform: scale(.6);
    }
}

@keyframes lampS {
    0%{
        opacity: 1;
        transform: scale(1);
    }
    100%{
        opacity: 1;
        transform: scale(.6);
    }
}
@-webkit-keyframes lamp{
    0%{
        opacity: 1;
       top:1.38rem;
    }
    100%{
        opacity: 1;
        top:1.58rem;
    }
}
@keyframes lamp{
    0%{
        opacity: 1;
        top:1.38rem;
    }
    100%{
        opacity: 1;
        top:1.58rem;
    }
}

.swiper-slide-active .page2_cute{
    -webkit-animation:cute 1.2s .3s linear forwards;
    animation:cute 1.2s .3s linear forwards;
}
@-webkit-keyframes cute {
    0%{
        opacity: 0;
        -webkit-transform: translateX(-100%);
    }
    100%{
        opacity: 1;
        -webkit-transform: translateX(0);
    }
}
@keyframes cute {
    0%{
        opacity: 0;
        transform: translateX(-100%);
    }
    100%{
        opacity: 1;
        transform: translateX(0);
    }
}

.swiper-slide-active .page2_text{
    -webkit-animation:cut 1s .6s linear forwards;
    animation:cut 1s .6s linear forwards;
}
@-webkit-keyframes cut{
    0%{opacity: 1;clip: rect(0,4.84rem,1rem,0);}
    100%{opacity: 1;clip: rect(0,4.84rem,4.38rem,0);}
}
@keyframes cut{
    0%{opacity: 1;clip:  rect(0,4.84rem,1rem,0);}
    100%{opacity: 1;clip: rect(0,4.84rem,4.38rem,0);}
}
.swiper-slide-active .page2_text2{
    -webkit-animation:cut2 1s 1.2s linear forwards;
    animation:cut2 1s 1.2s linear forwards;
}
@-webkit-keyframes cut2{
    0%{opacity: 1;clip: rect(0,4.08rem,1rem,0);}
    100%{opacity: 1;clip: rect(0,4.08rem,4.98rem,0);}
}
@keyframes cut2{
    0%{opacity: 1;clip:  rect(0,4.08rem,1rem,0);}
    100%{opacity: 1;clip: rect(0,4.08rem,4.98rem,0);}
}
.swiper-slide-active .page2_text3{
    -webkit-animation:cut3 1s 1.8s linear forwards;
    animation:cut3 1s 1.8s linear forwards;
}
@-webkit-keyframes cut3{
    0%{opacity: 1;clip: rect(0,3.38rem,1rem,0);}
    100%{opacity: 1;clip: rect(0,3.38rem,5.58rem,0);}
}
@keyframes cut3{
    0%{opacity: 1;clip:  rect(0,3.38rem,1rem,0);}
    100%{opacity: 1;clip: rect(0,3.38rem,5.58rem,0);}
}
.swiper-slide-active .page2_text4{
    -webkit-animation:cut4 1s 2.4s linear forwards;
    animation:cut4 1s 2.4s linear forwards;
}
@-webkit-keyframes cut4{
    0%{opacity: 1;clip: rect(0,2.6rem,1rem,0);}
    100%{opacity: 1;clip: rect(0,2.6rem,6.12rem,0);}
}
@keyframes cut4{
    0%{opacity: 1;clip:  rect(0,2.6rem,1rem,0);}
    100%{opacity: 1;clip: rect(0,2.6rem,6.12rem,0);}
}
/*page3*/
.swiper-slide-active .page3_text{
    -webkit-animation:smallbig .4s .3s linear forwards;
    animation:smallbig .4s .3s linear forwards;
}
.swiper-slide-active .page3_text2{
    -webkit-animation:page3_text2 .8s .7s linear forwards;
    animation:page3_text2 .8s .7s linear forwards;
}
@-webkit-keyframes  page3_text2{
   0%{
       opacity: 0;
       top:0;
   }
    100%{
        opacity: 1;
        top:.46rem;
    }
}
@keyframes  page3_text2{
    0%{
        opacity: 0;
        top:0;
    }
    100%{
        opacity: 1;
        top:.46rem;
    }
}
.swiper-slide-active .page3_text5{
    -webkit-animation:page3_text5 .8s 1s linear forwards;
    animation:page3_text5 .8s 1s linear forwards;
}
@-webkit-keyframes  page3_text5{
    0%{
        opacity: 0;
        top:0;
    }
    100%{
        opacity: 1;
        top:3.02rem;
    }
}
@keyframes  page3_text5{
    0%{
        opacity: 0;
        top:0;
    }
    100%{
        opacity: 1;
        top:3.02rem;
    }
}
.swiper-slide-active .page3_text3{
    -webkit-animation:page3_text3 .6s 1.6s linear forwards;
    animation:page3_text3 .6s 1.6s linear forwards;
}


@-webkit-keyframes page3_text3{
    0%{
        -webkit-transform: rotate3d(0, 0, 1, 0deg);
        transform: rotate3d(0, 0, 1, 0deg);
        -webkit-transform-origin: bottom center;
        transform-origin: bottom center;
        -webkit-animation-timing-function: ease-in-out;
        animation-timing-function: ease-in-out;
        opacity: 1;
        top:.16rem;
    }
    50%{
        -webkit-transform: rotate3d(0, 0, 1, -6deg);
        transform: rotate3d(0, 0, 1, -6deg);
        -webkit-transform-origin: bottom center;
        transform-origin: bottom center;
        -webkit-animation-timing-function: ease-in-out;
        animation-timing-function: ease-in-out;
        opacity: 1;
        top:.16rem;
    }
    100%{
        -webkit-transform: rotate3d(0, 0, 1, 0deg);
        transform: rotate3d(0, 0, 1, 0deg);
        -webkit-transform-origin: bottom center;
        transform-origin: bottom center;
        -webkit-animation-timing-function: ease-in-out;
        animation-timing-function: ease-in-out;
        opacity: 1;
        top:1.46rem;
    }
}
@keyframes page3_text3{
    0%{
        -webkit-transform: rotate3d(0, 0, 1, 0deg);
        transform: rotate3d(0, 0, 1, 0deg);
        -webkit-transform-origin: bottom center;
        transform-origin: bottom center;
        -webkit-animation-timing-function: ease-in-out;
        animation-timing-function: ease-in-out;
        opacity: 1;
        top:.16rem;
    }
    50%{
        -webkit-transform: rotate3d(0, 0, 1, -6deg);
        transform: rotate3d(0, 0, 1, -6deg);
        -webkit-transform-origin: bottom center;
        transform-origin: bottom center;
        -webkit-animation-timing-function: ease-in-out;
        animation-timing-function: ease-in-out;
        opacity: 1;
        top:.16rem;
    }
    100%{
        -webkit-transform: rotate3d(0, 0, 1, 0deg);
        transform: rotate3d(0, 0, 1, 0deg);
        -webkit-transform-origin: bottom center;
        transform-origin: bottom center;
        -webkit-animation-timing-function: ease-in-out;
        animation-timing-function: ease-in-out;
        opacity: 1;
        top:1.46rem;
    }

}

.swiper-slide-active .page3_text4{
    -webkit-animation:page3_text4 .6s 2.2s linear forwards;
    animation:page3_text4 .6s 2.2s linear forwards;
}
@-webkit-keyframes page3_text4{
    0%{
        -webkit-transform: rotate3d(0, 0, 1, 0deg);
        transform: rotate3d(0, 0, 1, 0deg);
        -webkit-transform-origin: bottom center;
        transform-origin: bottom center;
        -webkit-animation-timing-function: ease-in-out;
        animation-timing-function: ease-in-out;
        opacity: 1;
        top:.16rem;
    }
    50%{
        -webkit-transform: rotate3d(0, 0, 1, -6deg);
        transform: rotate3d(0, 0, 1, -6deg);
        -webkit-transform-origin: bottom center;
        transform-origin: bottom center;
        -webkit-animation-timing-function: ease-in-out;
        animation-timing-function: ease-in-out;
        opacity: 1;
        top:.16rem;
    }
    100%{
        -webkit-transform: rotate3d(0, 0, 1, 0deg);
        transform: rotate3d(0, 0, 1, 0deg);
        -webkit-transform-origin: bottom center;
        transform-origin: bottom center;
        -webkit-animation-timing-function: ease-in-out;
        animation-timing-function: ease-in-out;
        opacity: 1;
        top:2.2rem;
    }
}
@keyframes page3_text4{
    0%{
        -webkit-transform: rotate3d(0, 0, 1, 0deg);
        transform: rotate3d(0, 0, 1, 0deg);
        -webkit-transform-origin: bottom center;
        transform-origin: bottom center;
        -webkit-animation-timing-function: ease-in-out;
        animation-timing-function: ease-in-out;
        opacity: 1;
        top:.16rem;
    }
    50%{
        -webkit-transform: rotate3d(0, 0, 1, -6deg);
        transform: rotate3d(0, 0, 1, -6deg);
        -webkit-transform-origin: bottom center;
        transform-origin: bottom center;
        -webkit-animation-timing-function: ease-in-out;
        animation-timing-function: ease-in-out;
        opacity: 1;
        top:.16rem;
    }
    100%{
        -webkit-transform: rotate3d(0, 0, 1, 0deg);
        transform: rotate3d(0, 0, 1, 0deg);
        -webkit-transform-origin: bottom center;
        transform-origin: bottom center;
        -webkit-animation-timing-function: ease-in-out;
        animation-timing-function: ease-in-out;
        opacity: 1;
        top:2.2rem;
    }

}
.swiper-slide-active .page3_text6{
    -webkit-animation:page3_text6 .6s 2.6s linear forwards;
    animation:page3_text6 .6s 2.6s linear forwards;
}
@-webkit-keyframes page3_text6 {
    0%{
        opacity: 0;
        top:.58rem;
    }
    100%{
        opacity: 1;
        top:1.58rem;
    }
}
@keyframes page3_text6 {
    0%{
        opacity: 0;
        top:.58rem;
    }
    100%{
        opacity: 1;
        top:1.58rem;
    }
}
.swiper-slide-active .page3_text7{
    -webkit-animation:page3_text7 .6s 2.7s linear forwards;
    animation:page3_text7 .6s 2.7s linear forwards;
}
@-webkit-keyframes page3_text7 {
    0%{
        opacity: 0;
        top:3.98rem;
    }
    100%{
        opacity: 1;
        top:2.98rem;
    }
}
@keyframes page3_text7 {
    0%{
        opacity: 0;
        top:3.98rem;
    }
    100%{
        opacity: 1;
        top:2.98rem;
    }
}

/*page4*/
.swiper-slide-active .page4_text{
    -webkit-animation:smallbig .4s .3s linear forwards;
    animation:smallbig .4s .3s linear forwards;
}
.swiper-slide-active .page4_text2{
    -webkit-animation:page4_text2 .8s .7s linear forwards;
    animation:page4_text2 .8s .7s linear forwards;
}
@-webkit-keyframes page4_text2 {
    0%{
        opacity: 0;
        -webkit-transform: translateY(-100%);
    }
    100%{
        opacity: 1;
        -webkit-transform: translateY(0);
    }
}
@keyframes page4_text2 {
    0%{
        opacity: 0;
        transform: translateY(-100%);
    }
    100%{
        opacity: 1;
        transform: translateY(0);
    }
}
.swiper-slide-active .page4_text3{
    -webkit-animation:page4_text3 .8s .8s linear forwards;
    animation:page4_text3 .8s .8s linear forwards;
}
@-webkit-keyframes page4_text3 {
    0%{
        opacity: 0;
        -webkit-transform: translateY(30%);
    }
    100%{
        opacity: 1;
        -webkit-transform: translateY(0);
    }
}
@keyframes page4_text3 {
    0%{
        opacity: 0;
        transform: translateY(30%);
    }
    100%{
        opacity: 1;
        transform: translateY(0);
    }
}
/*page5*/
.swiper-slide-active .page5_text2{
    -webkit-animation:tree .4s .3s linear forwards;
    animation:tree .4s .3s linear forwards;
}
.swiper-slide-active .page5_text{
    -webkit-animation:page5_text .6s .7s linear forwards;
    animation:page5_text .6s .7s linear forwards;
}
@-webkit-keyframes page5_text {
    0%{
        opacity: 0;
        height:.01rem;
    }
    20%{
         opacity: 0.2;
         height:.8rem;
     }
    40%{
        opacity: 0.4;
        height:1.2rem;
    }
    60%{
        opacity: 0.6;
        height:1.6rem;
    }
    80%{
        opacity: 0.8;
        height:1.8rem;
    }
    100%{
        opacity: 1;
       height:2.2rem;
    }
}
@keyframes page5_text {
    0%{
        opacity: 0;
        height:.01rem;
    }
    20%{
        opacity: 0.2;
        height:.8rem;
    }
    40%{
        opacity: 0.4;
        height:1.2rem;
    }
    60%{
        opacity: 0.6;
        height:1.6rem;
    }
    80%{
        opacity: 0.8;
        height:1.8rem;
    }
    100%{
        opacity: 1;
        height:2.2rem;
    }
}

.clear:after{clear:both;content:'';height:0;overflow:hidden;display:block;}

完整程序及资源下载地址： https://pan.baidu.com/s/1YzSilOw9N1wiX50OQy1kKA，关注公众号（python代码大全）回复：中秋祝福提取码，获得下载提取码 。

# 动画 # javascript # css3
Logo
技术共进，成长同行——讯飞AI开发者社区

技术共进，成长同行——讯飞AI开发者社区

更多推荐

AI智能体—人工智能工作流与人工智能智能体：真正的区别是什么？

本文探讨了人工智能工作流与智能体的核心区别。工作流是静态、可预测的执行序列（如预处理→嵌入→搜索→总结），适合批处理作业；而智能体能动态感知环境、自主决策（感知→推理→决策循环），具备适应性和工具选择能力。关键差异在于：工作流遵循固定路径，智能体则能根据目标调整策略。架构上，工作流使用Airflow等工具，智能体依赖LangChain等框架。智能体的自主性使其更适用于动态环境，代表下一代AI应用方

avatar 讯飞AI开发者社区
cover

【愚公系列】《人工智能70年》044-数据科学崛起（安全与隐私，硬币的另一面）

avatar 讯飞AI开发者社区
cover

通用智能体：面向数百万多风格公众号的轻量自适应风格化人工智能助手

avatar 讯飞AI开发者社区