swiper轮播+动画+蒙版特效

效果如上，只能贴一个不会动的图了。。。实际效果非常棒，此版本兼顾了PC端和移动端。

1、上层添加蒙版图片

2、底层是swiper轮播图

3、每个轮播图在切换前由左向右移动

HTML代码：

<div id="banner" class="bannerBox">
        <div class="swiper-container" style="z-index: 0;">
            <div class="swiper-wrapper">
                <div class="swiper-slide moveRight">
                    <div class="pc"><img src="../../../../../Public/Home/images/img_banner01.jpg" /></div>    
                    <div class="sp"><img src="../../../../../Public/Home/images/img_banner01_sp.jpg" /></div>                 
                </div>
                <div class="swiper-slide">
                    <div class="pc"><img src="../../../../../Public/Home/images/img_banner02.jpg" /></div>
                    <div class="sp"><img src="../../../../../Public/Home/images/img_banner02_sp.jpg" /></div> 
            </div>
                <div class="swiper-slide">
                    <div class="pc"><img src="../../../../../Public/Home/images/img_banner03.jpg" /></div>
                    <div class="sp"><img src="../../../../../Public/Home/images/img_banner03_sp.jpg" /></div> 
                </div>
            </div>
        </div>
        <div class="bannerMask">
                <div class="baMaskScCon">
                  <div class="banMaskImg">
                    <span>
                        <div class="pc"><img src="../../../../../Public/Home/images/img_banner_mask.png" alt=""></div>                       
                        <div class="sp"><img src="../../../../../Public/Home/images/img_banner_mask_sp.png" alt=""></div>
                    </span>
                    <div class="banner-text">
                        <div>
                            <p>精准健康解决方案</p>
                            <h2>改变疾病的预测预防和治疗方式</h2></div>
                        <div class="home-button"><a href="{$vo.out_url|get_nav_url}" >更多</a></div>
                    </div>
                  </div>                
                </div>     
        </div>
      </div> 

js代码：我是给每个图片都加了向右移动的动画，可根据需要添加其他动画，css里面有其他参考动画，此处参考http://bbs.swiper.com.cn/forum.php?mod=viewthread&tid=2234&extra= 动画效果

 <!-- Swiper JS -->
 <script src="__JS__/swiper.min.js"></script>
 <!-- Initialize Swiper -->
 <script>
 trList=['moveRight','moveRight','moveRight'];
 var swiper = new Swiper('.swiper-container',{
     speed:500,
     autoplay:4400,
     autoplayDisableOnInteraction:false,
     effect:'fade',
     pagination : '.swiper-pagination',
     paginationClickable :true,
     onSlideChangeStart: function(swiper){
         nextSlide=swiper.slides.eq(swiper.activeIndex);
         nextSlide.addClass(trList[Math.floor(Math.random()*3)]);
        },
     onSlideChangeEnd: function(swiper){
         prevSlide=swiper.slides[swiper.previousIndex];
         prevSlide.className="swiper-slide";
        },
     });	
 </script>

CSS代码：

@charset "utf-8";

.banMaskImg > span img
 {
	opacity: 1;
}

/*banner*/

.bannerBox {
	width: 100%;
	height: 100vh;
	position: relative;
	overflow: hidden;
	
}
.swiper-container .swiper-wrapper .pc {
	display: block;
}
.swiper-container .swiper-wrapper .sp {
	display: none;
}
.banMaskImg .pc{display: block;}
.banMaskImg .sp{display: none;}

.baMaskScCon {
	position: relative;
	z-index: 1;
}

.bannerMask {
	position: absolute;
	width: 100%;
	left: 50%;
	top: 0;
	transform: translate(-50%,0);
}

.bannerList {
	width: 100%;
	height: 100%;
}

.bannerList img {
	width: 100%;
	display: block;
}

.banMaskImg img {
	width: 100%;
	height: 100%;
	display: block;
}
.swiper-container .swiper-wrapper{
    -webkit-transition-timing-function: linear; /*之前是ease-out*/
    -moz-transition-timing-function: linear;
    -ms-transition-timing-function: linear;
    -o-transition-timing-function: linear;
    transition-timing-function: linear;
    left: 50%;
    transform: translateX(-50%);
}

@media all and (min-width: 0) and (max-width: 1023px) {
.bannerBox {height: auto;}
}
@media all and (min-width: 0) and (max-width: 767px) {
	.banMaskImg > span img {
		opacity: 1;
	}
	
	.bannerMask .swiper-container {
		opacity: 0;
	}
	
	.swiper-container .swiper-wrapper {
	    left: auto;
	    transform: translateX(0);
	}
	.swiper-container .swiper-wrapper .pc {
	    display: none;
	}
	.swiper-container .swiper-wrapper .sp {
	    display: block;
	}
	.banMaskImg .pc{display: none;}
	.banMaskImg .sp{display: block;}

	.banMaskImg {
		position: relative;
		left: auto;
		transform: translateX(0);
	}	
}
.leftUp img{-webkit-animation-name:leftUp;animation-name:leftUp;}
@-webkit-keyframes leftUp{
0%{transform:scale(1.1,1.1) translate(4.545%,4.545%); }
100%{transform:scale(1.1,1.1)  translate(-4.545%,-4.545%);}}
@keyframes leftUp{
0%{transform:scale(1.1,1.1) translate(4.545%,4.545%);}
100%{transform:scale(1.1,1.1)  translate(-4.545%,-4.545%);}}

.moveRight img{-webkit-animation-name:moveRight;animation-name:moveRight;}
@-webkit-keyframes moveRight{
0%{transform:scale(1.1,1.1) translate(-4.545%,0); }
100%{transform:scale(1.1,1.1)  translate(4.545%,0);}}
@keyframes moveRight{
0%{transform:scale(1,1) translate(-4.545%,0);}
100%{transform:scale(1,1)  translate(4.545%,0);}}

.moveDown img{-webkit-animation-name:moveDown;animation-name:moveDown;}
@-webkit-keyframes moveDown{
0%{transform:scale(1.1,1.1) translate(0,-4.545%); }
100%{transform:scale(1.1,1.1)  translate(0,4.545%);}}
@keyframes moveDown{
0%{transform:scale(1.1,1.1) translate(0,-4.545%);}
100%{transform:scale(1.1,1.1)  translate(0,4.545%);}}

.centerBig img{-webkit-animation-name:centerBig;animation-name:centerBig;}
@-webkit-keyframes centerBig{
100%{transform:scale(1.1,1.1);}}
@keyframes centerBig{
100%{transform:scale(1.1,1.1);}}

.rightDownBig img{-webkit-animation-name:rightDownBig;animation-name:rightDownBig;}
@-webkit-keyframes rightDownBig{
100%{transform:scale(1.1,1.1) translate(4%,4%);}}
@keyframes rightDownBig{
100%{transform:scale(1.1,1.1) translate(4%,4%);}}

.swiper-slide img{
	animation-duration:5s;
	animation-timing-function:linear;
	animation-fill-mode: forwards;
	-webkit-animation-duration:5s;
	-webkit-animation-timing-function:linear;
	-webkit-animation-fill-mode: forwards;
	}