SVG黑科技微信排版『左右视差滚动』模板代码

最新推荐文章于 2024-04-12 11:26:16 发布

懂点君

最新推荐文章于 2024-04-12 11:26:16 发布

阅读量595

点赞数

分类专栏：模板代码 | SVG公众号互动排版文章标签：前端 html5 javascript css chrome

转载请联系微信号：dong_dian_jun

本文链接：https://blog.csdn.net/h5course/article/details/119292894

版权

模板代码 | SVG公众号互动排版专栏收录该内容

54 篇文章 22 订阅 ¥99.90 ¥299.90

订阅专栏

超级会员免费看

本文分享了一种SVG黑科技应用，通过代码实现微信排版中的左右视差滚动效果，适用于前端开发中的创新视觉展示。

摘要由CSDN通过智能技术生成

模板代码

<section style="display: flex;overflow-x: scroll;overflow-y: hidden;width: 100%;-webkit-overflow-scrolling:touch;scroll-snap-type: x mandatory;perspective: 1px;">
            <!-- 第一页 -->
            <section style="flex: 0 0 auto;width: 100%;height: 100%;background-color: #000;scroll-snap-align: center;">
                <section style="height: 0;">
                    <section style="transform: translateZ(0.9px) scale(0.1);">
                        <svg style="display: block;width: 100%;background-image: url(https://mmbiz.qpic.cn/mmbiz_png/JpraGu7eGqRZGFZAkT2NJwmzibjUaT5VOXEX09cMwn1sDHUL46mYFiceLnlsFWuISLgDM2FlyvlN5NCEHCjrTaHQ/0?wx_fmt=png);backgro