swiper轮播+动画+蒙版特效

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

1、上层添加蒙版图片

2、底层是swiper轮播图

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

HTML代码：

        

            

                

                    
    
                    
                 
                
                

                    

                    
 
            
                

                    

                    
 
                
            
        
        

                

                  

                    
                        
                       
                        

                    
                    

                        

                            
精准健康解决方案
                            
改变疾病的预测预防和治疗方式
                        
更多
                    
                  
                
                
     
        
      
 

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

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;
	}