【每日一练】10—移动3D触摸滑块的实现
web前端开发
共 2136字，需浏览 5分钟
· 2022-06-21
作者 | 杨小爱
写在前面
今天的这个小练习，是之前分享在视频号上，有小伙伴看了，说让我把源码分享一下，于是，今天我就把这个案例的源码贴出来了，需要的小伙伴自行取走。
具体效果如下：
<html><head><meta charset="utf-8"><title>【每日一练】10—移动3D触摸滑块的实现</title><link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css"></head><body><div class="carousel"><img src="mobile.png" class="mobile"><div class="carousel-item"><img src="img1.jpg"></div><div class="carousel-item"><img src="img2.jpg"></div><div class="carousel-item"><img src="img3.jpg"></div><div class="carousel-item"><img src="img4.jpg"></div><div class="carousel-item"><img src="img5.jpg"></div></div><script src="https://code.jquery.com/jquery-3.4.1.js"></script><script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script><script type="text/javascript">$(document).ready(function(){$('.carousel').carousel();});</script></body></html>
*{margin: 0;padding: 0;box-sizing: border-box;}body{display: flex;justify-content: center;align-items: center;background: #000;}.carousel{position: relative;height: 600px;margin-top: 80px;perspective: 1500px;}.carousel .carousel-item{width: 250px;}.carousel .carousel-item img{max-width: 235px;transform: translateX(8px) translateY(-100px);}.carousel .carousel-item h3{margin-top: -5px;background: #fff;color: #000;box-sizing: border-box;padding: 5px;font-weight: bold;font-size: 18px;text-align: center;}.carousel .mobile{position: absolute;top: 50%;left: 50%;transform: translate(-50%,-50%);z-index: 1000;pointer-events: none;max-width: 260px;}
写在最后
如果你觉得今天的内容对你有用的话，请记得关注我们的视频号，我们也会在上面分享一些案例效果。
我是杨小爱，我们明天见。
学习更多技能
请点击下方公众号
评论