HTML+CSS+JS实现 ❤️H5 3D传送带视差照片特效❤️【附完整源码分享】小知识，大挑战！本文正在参与「程序

小知识，大挑战！本文正在参与「程序员必备小知识」创作活动

效果演示：

代码目录：

主要代码实现：

部分CSS样式：

html,
body,
.stage,
.ring,
.img {
    width: 100%;
    height: 100%;
    transform-style: preserve-3d;
    user-select: none;
}

html,
body,
.stage {
    overflow: hidden;
    background: #000;
}

div,
svg {
    position: absolute;
}

.container {
    perspective: 2000px;
    width: 300px;
    height: 400px;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
}

HTML代码 :

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Parallax Photo Carousel</title>

    <link rel="stylesheet" href="css/reset.min.css">
    <link rel="stylesheet" href="css/style.css">

</head>

<body>

    <div class="stage">

        <div class="container">
            <div class="ring">
                <div class="img"></div>
                <div class="img"></div>
                <div class="img"></div>
                <div class="img"></div>
                <div class="img"></div>
                <div class="img"></div>
                <div class="img"></div>
                <div class="img"></div>
                <div class="img"></div>
                <div class="img"></div>
            </div>
        </div>

    </div>

    <script type="text/javascript" src='js/gsap.min.js'></script>
    <script type="text/javascript" src='js/zepto.min.js'></script>
    <script type="text/javascript" src="js/script.js"></script>

</body>

</html>

打卡文章更新 **40 ** / 100天

大家可以点赞、收藏、关注、评论我啦