swiper实现倾斜轮播图片选择缩放大小效果代码
代码语言:html
所属分类:幻灯片
代码描述:swiper实现倾斜轮播图片选择缩放大小效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/swiper.4.5.1.css"> <style> .img_swiper{ width: 800px; margin: 100px auto; position: relative; } .img{ width: 100%; height: 100%; } .img_swiper .swiper-button-prev{ width: 40px; height: 40px; background-image: url(//repo.bfw.wiki/bfwrepo/icon/5ff8f2c747054.png); background-size: cover; /* left: -80px; */ } .img_swiper .swiper-button-next{ width: 40px; height: 40px; background-image: url(//repo.bfw.wiki/bfwrepo/icon/6068f15932bf6.png); background-size: cover; /* right: -80px; */ } .img_swiper .swiper-button-prev.swiper-button-disabled{ background-image: url(//repo.bfw.wiki/bfwrepo/icon/5ff8f2c747054.png); background-color: #FFFFFF; } .img_swiper .swiper-button-next.swiper-button-disabled{ background-image: url(//repo.bfw.wiki/bfwrepo/icon/6068f15932bf6.png); background-color: #FFFFFF; } .img_swiper .swiper-slide{ width: 440px; } .swiper_slide_img{ /* height: 440px; */ perspective: 300px; -webkit-perspective: 500; /* position: absolute; */ margin-left: -240px; position: relative; } .swiper_slide_img:first-child{ margin-left: 0; } .swiper_slide_img>img{ width: 360px; height: 500px; transform: rotateY(35deg) scale(0.7); transition: 1s; border-radius: 20px; cursor: url('//repo.bfw.wiki/bfwrepo/image/603857094e4e4.png'), default; } .swiper_slide_img:hover{ z-index: 1000; } .swiper_slide_img:hover img{ transform: rotateY(0deg) scale(1); transition: 1s; } .pic_container{ width: 100%; height: 100%; position: fixed; top: 0; left: 0; background-color: #34353A; display: none; z-index: 200; overflow-y: scroll; } .pic_container_inner{ width: 25%; display: flex; align-items: center; justify-content: center; margin: auto; position: absolute; top: 0; left: 0; right: 0; bottom: 0; } .pic_container_inner>img{ width: 100%; border-radius: 10px; cursor: url('//repo.bfw.wiki/bfwrepo/image/6038571b445ab.png'), default; } </style> </head> <body> <div class="img_swiper"> <div class="swiper-container"> <div class="swiper-wrapper"> <div class="swiper-slide"> <div class="swiper_slide_img" data-url="//repo.bfw.wiki/bfwrepo/image/61471be1086c9.png"> <img src="//repo.bfw.wiki/bfwrepo/image/61471be1086c9.png" class="img" alt=""> </div> </div> <div class="swiper-slide"> <div class="swiper_slide_img" data-url="//repo.bfw.wiki/bfwrepo/image/61471bc26190a.png"> <img src="//repo.bfw.wi.........完整代码请登录后点击上方下载按钮下载查看
网友评论0