swiper轮播+动画+蒙版特效

2024-02-04 20:30| 来源: 网络整理| 查看: 265

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

1、上层添加蒙版图片

2、底层是swiper轮播图

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

HTML代码：

精准健康解决方案

改变疾病的预测预防和治疗方式更多

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

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"; }, });

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

【本文地址】

公司简介

联系我们