其他
【每日一练】28—用Swiper实现的3D滑动效果
我把今天练习项目中的素材文件打包了，大家根据需要自行下载获取，素材下载地址：https://pan.baidu.com/s/1UCB63NVDZpDWtSI43ayt8w?pwd=knm4
<!DOCTYPE html><html><head><title>【每日一练】28—用Swiper实现的3D滑动效果</title><meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1"><link rel="stylesheet" type="text/css" href="swiper.min.css"></head><body> <div class="swiper-container"> <div class="swiper-wrapper"> <div class="swiper-slide"> <div class="imgBx"> <img src="img1.jpg"> </div> <div class="details"> <h3>杨小爱<br><span>Web前端开发-网页设计</span></h3> </div> </div> <div class="swiper-slide"> <div class="imgBx"> <img src="img1.jpg"> </div> <div class="details"> <h3>杨小爱<br><span>Web前端开发-网页设计</span></h3> </div> </div> <div class="swiper-slide"> <div class="imgBx"> <img src="img1.jpg"> </div> <div class="details"> <h3>杨小爱<br><span>Web前端开发-网页设计</span></h3> </div> </div> <div class="swiper-slide"> <div class="imgBx"> <img src="img1.jpg"> </div> <div class="details"> <h3>杨小爱<br><span>Web前端开发-网页设计</span></h3> </div> </div> <div class="swiper-slide"> <div class="imgBx"> <img src="img1.jpg"> </div> <div class="details"> <h3>杨小爱<br><span>Web前端开发-网页设计</span></h3> </div> </div> <div class="swiper-slide"> <div class="imgBx"> <img src="img1.jpg"> </div> <div class="details"> <h3>杨小爱<br><span>Web前端开发-网页设计</span></h3> </div> </div> <div class="swiper-slide"> <div class="imgBx"> <img src="img1.jpg"> </div> <div class="details"> <h3>杨小爱<br><span>Web前端开发-网页设计</span></h3> </div> </div> <div class="swiper-slide"> <div class="imgBx"> <img src="img1.jpg"> </div> <div class="details"> <h3>杨小爱<br><span>Web前端开发-网页设计</span></h3> </div> </div> <div class="swiper-slide"> <div class="imgBx"> <img src="img1.jpg"> </div> <div class="details"> <h3>杨小爱<br><span>Web前端开发-网页设计</span></h3> </div> </div> </div> <!-- Add Pagination --> <div class="swiper-pagination"></div> </div> <script type="text/javascript" src="swiper.min.js"></script> <script> var swiper = new Swiper('.swiper-container', { effect: 'coverflow', grabCursor: true, centeredSlides: true, slidesPerView: 'auto', coverflowEffect: { rotate: 20, stretch: 0, depth: 200, modifier: 1, slideShadows : true, }, pagination: { el: '.swiper-pagination', }, });</script></body></html>
body{ background: #262626; font-family: Helvetica Neue, Helvetica, Arial, sans-serif; font-size: 14px; color:#000; margin: 0; padding: 0;}.swiper-container{ width: 100%; padding-top: 200px; padding-bottom: 50px;}.swiper-slide{ background-position: center; background-size: cover; width: 300px; height: 380px; background: #fff;}.swiper-slide .imgBx{ width: 100%; height: 300px; overflow: hidden;}.swiper-slide .imgBx img{ width: 100%;}.swiper-slide .details{ box-sizing: border-box; padding: 20px;}.swiper-slide .details h3{ margin: 0; padding: 0; font-size: 20px; text-align: center; line-height: 20px;}.swiper-slide .details h3 span{ font-size: 16px; color: #f44336;}写在最后
使用Swiper效果，在我们的视频号上也有类似的案例，具体效果如下：
以上就是我们今天的【每日一练】的全部内容，希望今天的小练习对你有用，如果你觉得有帮助的话，请点赞我，关注我，并将它分享给你身边做开发的朋友，也许能够帮助到他。
我是杨小爱，我们明天见。
PS ：我们的视频号营运有段时间了，如果你还没有关注我们的视频号的话，请记得关注我们的视频号。
学习更多技能
请点击下方公众号