今天的这个小练习，是之前分享在视频号上，有小伙伴看了，说让我把源码分享一下，于是，今天我就把这个案例的源码贴出来了，需要的小伙伴自行取走。
HTML:
<!doctype html>
<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>
CSS:
*
{
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;
}
写在最后
如果你觉得今天的内容对你有用的话，请记得关注我们的视频号，我们也会在上面分享一些案例效果。
相关文章
