HTML+CSS+JS实现 ❤️swiper倾斜图片特效❤️
生活随笔
收集整理的這篇文章主要介紹了
HTML+CSS+JS实现 ❤️swiper倾斜图片特效❤️
小編覺得挺不錯的,現(xiàn)在分享給大家,幫大家做個參考.
????效果演示：??
代碼目錄：
主要代碼實現(xiàn)：
CSS樣式：
.img_swiper {width: 800px;margin: 0 auto;position: relative; }.img {width: 100%;height: 100%; }.img_swiper .swiper-button-prev {width: 40px;height: 40px;background-image: url(../img/prev_white.png);background-size: cover;/* left: -80px; */ }.img_swiper .swiper-button-next {width: 40px;height: 40px;background-image: url(../img/next_white.png);background-size: cover;/* right: -80px; */ }.img_swiper .swiper-button-prev.swiper-button-disabled {background-image: url(../img/prev.png);background-color: #FFFFFF; }.img_swiper .swiper-button-next.swiper-button-disabled {background-image: url(../img/next.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('../img/enlarge.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('../img/narrow.png'), default; }HTML代碼 :
<!DOCTYPE html> <html><head><meta charset="utf-8"><title>圖片輪播--可翻轉(zhuǎn)、可放大縮小</title><link href="css/swiper.min.css" rel="stylesheet"><link rel="stylesheet" type="text/css" href="css/index.css" /></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="img/img1.jpg"><img src="img/img1.jpg" class="img" alt=""></div></div><div class="swiper-slide"><div class="swiper_slide_img" data-url="img/img2.jpg"><img src="img/img2.jpg" class="img" alt=""></div></div><div class="swiper-slide"><div class="swiper_slide_img" data-url="img/img3.jpg"><img src="img/img3.jpg" class="img" alt=""></div></div><div class="swiper-slide"><div class="swiper_slide_img" data-url="img/img4.jpg"><img src="img/img4.jpg" class="img" alt=""></div></div><div class="swiper-slide"><div class="swiper_slide_img" data-url="img/img5.jpg"><img src="img/img5.jpg" class="img" alt=""></div></div></div></div><div class="swiper-button-prev one"></div><div class="swiper-button-next one"></div></div><!-- 圖片放大 --><div class="pic_container"><div class="pic_container_inner"><img src="" id="box" style="transform: scale(1.5);" alt=""></div></div><script src="js/jquery.min.js" type="text/javascript" charset="utf-8"></script><script src="js/swiper.min.js" type="text/javascript" charset="utf-8"></script><script src="js/index.js" type="text/javascript" charset="utf-8"></script><script src="js/imgZoom.js" type="text/javascript" charset="utf-8"></script></body></html>上面的圖片和js需要引入?
源碼獲取
查看博主主頁或私信博主獲取
精彩推薦更新中：
HTML5大作業(yè)實戰(zhàn)100套
??打卡 文章 更新?40??/? 100天
大家可以點贊、收藏、關(guān)注、評論我啦 、需要完整文件隨時聯(lián)系我或交流喲~！
創(chuàng)作挑戰(zhàn)賽新人創(chuàng)作獎勵來咯，堅持創(chuàng)作打卡瓜分現(xiàn)金大獎總結(jié)
以上是生活随笔為你收集整理的HTML+CSS+JS实现 ❤️swiper倾斜图片特效❤️的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： java.rmi.server.port
- 下一篇： 没有icon_ICON设计干货来啦~