这个demo只是一个大概的思路，具体还需要根据情况来进行
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"> <title>Document</title> <link rel="stylesheet" href="reset.css"> <link rel="stylesheet" href="swiper.min.css"> <link rel="stylesheet" type="text/css" href="animate.css"> <style> html,body{ width:100%; height:100%; overflow:hidden; } html{ font-size:100px;/*设计稿640*960*/ } .main,.swiper-container,.swiper-slide{ width:100%; height:100%; overflow:hidden; } .page1{ position:relative; background:url("../img/swiper/bg1.jpg") no-repeat; background-size:cover; } .page1 img{ position:absolute; opacity:0; } .page1 img:nth-child(1){ left:2rem; top:.28rem; width:.96rem; height:2.32rem; } .page1 img:nth-child(2){ right:0; top:.28rem; width:3.7rem; height:6rem; } .page1 img:nth-child(3){ left:.5rem; bottom:.8rem; width:5.5rem; height:5.12rem; } .page1 img:nth-child(4){ left:-1.6rem; bottom:0; width:7.86rem; height:5.88rem; } /*实现切换完成后页面中的元素在开始运动的思想:开始的时候当前的这个区域没有对应的ID，当切换到这个区域的时候，我们为其增加ID，在css中我们把所有的动画效果都放在指定的ID下，这样的话只需要让区域有ID，里面的子元素就有动画了*/ #page1 img:nth-child(1){ /*注意移动端的样式写两套 并且不加webkit的在后*/ -webkit-animation:bounceInLeft 1s linear 0s 1 both; animation:bounceInLeft 1s linear 0s 1 both; } #page1 img:nth-child(2){ /*注意移动端的样式写两套 并且不加webkit的在后*/ -webkit-animation:bounceInRight 1s linear .3s 1 both; animation:bounceInRight 1s linear .3s 1 both; } #page1 img:nth-child(3){ /*注意移动端的样式写两套 并且不加webkit的在后*/ -webkit-animation:bounceInUp 1s linear .6s 1 both; animation:bounceInUp 1s linear .6s 1 both; } #page1 img:nth-child(4){ /*注意移动端的样式写两套 并且不加webkit的在后*/ -webkit-animation:bounceInUp 1s linear .9s 1 both; animation:bounceInUp 1s linear .9s 1 both; } .page2{ position:relative; background:url("../img/swiper/bg2.jpg") no-repeat; background-size:cover; } .page2 img{ position:absolute; top:2.5rem; opacity:0; } .page2 img:nth-child(1){ top:0; left:0; width:3.4rem; height:1.74rem; } .page2 img:nth-child(2){ left:1.48rem; } .page2 img:nth-child(3){ left:3.2rem; } .page2 img:nth-child(4){ left:4.7rem; } #page2 img:nth-child(1){ -webkit-animation:bounceInLeft 1s linear 0s 1 both; animation:bounceInLeft 1s linear 0s 1 both; } #page2 img:nth-child(2){ -webkit-animation:zoomIn 1s linear .3s 1 both; animation:zoomIn 1s linear .3s 1 both; } #page2 img:nth-child(3){ -webkit-animation:zoomIn 1s linear .6s 1 both; animation:zoomIn 1s linear .6s 1 both; } #page2 img:nth-child(4){ -webkit-animation:zoomIn 1s linear .9s 1 both; animation:zoomIn 1s linear .9s 1 both; } .arrow{ position:absolute; left:50%; bottom:.2rem; z-index:10; margin-left:-.24rem; width:.48rem; height:.36rem; background:url("../img/swiper/web-swipe-tip.png") no-repeat; background-size:100% 100%; -webkit-animation:bounce 1s linear 0s infinite both; animation:bounce 1s linear 0s infinite both; } .music{ display:none; position:absolute; top:.2rem; right:.2rem; z-index:10; width:.6rem; height:.6rem; background:url("../audio/music.svg") no-repeat; background-size:100% 100%; } .music.move{ -webkit-animation :musicMove 1s linear 0s infinite both; animation :musicMove 1s linear 0s infinite both; } .music audio{ display:none; } @-webkit-keyframes musicMove{ 0%{ -webkit-transform:rotate(0deg); transform:rotate(0deg); } 100%{ -webkit-transform:rotate(360deg); transform:rotate(360deg); } } @keyframes musicMove{ 0%{ -webkit-transform:rotate(0deg); transform:rotate(0deg); } 100%{ -webkit-transform:rotate(360deg); transform:rotate(360deg); } } </style> </head> <body> <section class=\'main\'> <!--MUSIC--> <div class=\'music\' id=\'musicMenu\'> <audio src="beyond.mp3" preload = \'none\' loop autoplay></audio id=\'musicAudio\'> <!-- <audio> <source src=\'beyond.mp3\' type=\'audio/mpeg\'/> <source src=\'beyond.wav\' type=\'audio/wav\'/> <source src=\'beyond.ogg\' type=\'audio/ogg\'/> </audio> --> </div> <!--CONTAINER--> <div class=\'swiper-container\'> <div class=\'swiper-wrapper\'> <div class=\'swiper-slide page1\'> <img src="img/swiper/page1-text1.png" alt=""> <img src="img/swiper/page1-text2.png" alt=""> <img src="img/swiper/page1-text3.png" alt=""> <img src="img/swiper/page1-text4.png" alt=""> </div> <div class=\'swiper-slide page2\'> <img src="img/swiper/page2-text1.png" alt=""> <img src="img/swiper/page2-text2.png" alt=""> <img src="img/swiper/page2-text3.png" alt=""> <img src="img/swiper/page2-text4.png" alt=""> </div> </div> </div> <!--ARROW--> <div class=\'arrow\'></div> </section> <script charset=\'utf-8\' src=\'swiper.min.js\'></script> <script> //rem ~function(){ var desW = 640, winW = document.documentElement.clientWidth, ratio = winW / desW, oMain = document.querySelector(".main"); if(winW>desW){ oMain.style.margin = "0 auto"; oMain.style.width = desW + \'px\'; return; } document.documentElement.style.fontSize = ratio*100+"px"; }() new Swiper(\'.swiper-container\',{ direction:"vertical", loop:true, /*当切换结束后，给当前展示的区域添加对应的ID，由此实现对应的动画效果*/ onSlideChangeEnd:function(swiper){ var slideAry = swiper.slides;//获取当前一共有多少个活动快（包含loop模式前后多加的两个） var curIn = swiper.activeIndex;//当前展示的这个区域的索引 var total = slideAry.length; //计算ID是PAGE? var targetId = \'page\'; switch(curIn){ case 0: targetId += total - 2; break; case total - 1: targetId += 1; break; default: targetId += curIn } //给当前的活动块设置ID即可,还要把其余的移除 [].forEach.call(slideAry,function(item,index){ if(curIn === index){ item.id = targetId; return; } item.id = null; }) slideAry[curIn].id = targetId; //最后把animate.css里面的动画to里面添加opacity:1 } }) //MUSIC ~function(){ var musicMenu = document.getElementById(\'musicMenu\'), musicAudio = document.getElementById(\'musicAudio\'); musicMenu.addEventListener(\'click\',function(){ if(musicAudio.paused){ musicAudio.play(); musicMenu.className = "music move"; return; } musicAudio.pause(); musicMenu.className = "music"; }) function controlMusic(){ musicAudio.volume = 0.1; musicAudio.play(); musicAudio.addEventListener(\'canplay\',function(){ musicMenu.style.display = "block"; musicMenu.className = "music move"; }) } window.setTimeout(controlMusic,1000) }() </script> </body> </html>
上述代码有一个地方动态设置需要动画的ID值的代码，下图可以帮助你理解