SVG排版公众号文章『视差滚动效果』模板代码

发布于 2021-04-03 03:33

模板效果

CSS 属性 perspective指定了观察者与 z = 0 平面的距离，使具有三维位置变换的元素产生透视效果。translateZ >0 的三维元素比正常大，而 translateZ< 0 时则比正常小，大小程度由该属性的值决定。       三维元素在观察者后面的部分不会绘制出来，即 translateZ 值大于 perspective 属性值的部分。       当该属性值不为 0 和 none 时，容器内元素的层叠关系像是使用了 position: fixed 一样。
模板代码
<section style="width: 345px;margin: 0 auto;font-size: 0;line-height: 0;">        <!-- 风景图片 -->        <section>            <svg style="background-image: url(https://mmbiz.qpic.cn/mmbiz_jpg/JpraGu7eGqQ2MclqUTetQpexkpgDHp88EycpeqThGxza9TelvVyb3EcucYIjHibEPlL54BcBytoGQicSGzR5MyoQ/0?wx_fmt=jpeg);background-position: 0% 0%;background-repeat: no-repeat;background-size: 100%;-webkit-tap-highlight-color: transparent;" viewBox="0 0 1280 525" width="100%" xmlns="http://www.w3.org/2000/svg"></svg>        </section>        <!-- 文字图片 -->        <section style="margin-top: -6px;transform: translateZ(1.2px) scale(0.3);">            <svg style="background-image: url(https://mmbiz.qpic.cn/mmbiz_png/JpraGu7eGqQ2MclqUTetQpexkpgDHp88BTF91vy3WBkuMiafdKxf28B2GUXxTVibHLDxraQO34YFDPdfAxp5T7Zw/0?wx_fmt=png);background-position: 0% 0%;background-repeat: no-repeat;background-size: 100%;-webkit-tap-highlight-color: transparent;" viewBox="0 0 1951 633" width="100%" xmlns="http://www.w3.org/2000/svg"></svg>        </section>        <!-- 风景图片 -->        <section style="margin-top: -105px">            <svg style="background-image: url(https://mmbiz.qpic.cn/mmbiz_jpg/JpraGu7eGqQ2MclqUTetQpexkpgDHp88sZPabDnbTONachiadD4pD1JBeD3fJ99148PgovWSu0R3tEAsZgWvmyQ/0?wx_fmt=jpeg);background-position: 0% 0%;background-repeat: no-repeat;background-size: 100%;-webkit-tap-highlight-color: transparent;" viewBox="0 0 1280 792" width="100%" xmlns="http://www.w3.org/2000/svg" data-author=></svg>        </section>        <!-- 文字图片 -->        <section style="margin-top: -124px;transform: translateZ(1.3px) scale(0.3);">            <svg style="background-image: url(https://mmbiz.qpic.cn/mmbiz_png/JpraGu7eGqQ2MclqUTetQpexkpgDHp88Jp3fjpHt0IIWJHcrxZw0lePnavHdyPo9h10TrqPpBz3woG3bqKv9Nw/0?wx_fmt=png);background-position: 0% 0%;background-repeat: no-repeat;background-size: 100%;-webkit-tap-highlight-color: transparent;" viewBox="0 0 2630 1081" width="100%" xmlns="http://www.w3.org/2000/svg"></svg>        </section>        <!-- 风景图片 -->        <section style="margin-top: -21px">            <svg style="background-image: url(https://mmbiz.qpic.cn/mmbiz_jpg/JpraGu7eGqQ2MclqUTetQpexkpgDHp889ZUWoibiaVibkWhMvcOGFm4ItJHejKhSjJ5giaRkV3th8Sk3WrW2R5Lyag/0?wx_fmt=jpeg);background-position: 0% 0%;background-repeat: no-repeat;background-size: 100%;-webkit-tap-highlight-color: transparent;" viewBox="0 0 1280 1153" width="100%" xmlns="http://www.w3.org/2000/svg"></svg>        </section>        <!-- 文字图片 -->        <section style="margin-top: -360px;transform: translateZ(1.2px) scale(0.3);">            <svg style="background-image: url(https://mmbiz.qpic.cn/mmbiz_png/JpraGu7eGqQ2MclqUTetQpexkpgDHp88ON5l8P5XWyibRdcich1YVYs656yKibvDglwyz5jkiaQibrU2XV6icdyvgGgw/0?wx_fmt=png);background-position: 0% 0%;background-repeat: no-repeat;background-size: 100%;-webkit-tap-highlight-color: transparent;" viewBox="0 0 2568 2022" width="100%" xmlns="http://www.w3.org/2000/svg"></svg>        </section>        <!-- 风景图片 -->        <section style="margin-top: 90px;">            <svg style="background-image: url(https://mmbiz.qpic.cn/mmbiz_jpg/JpraGu7eGqQ2MclqUTetQpexkpgDHp88eOkAdLoUp0GsP6NTDEypRPl0w2r2gSdrITElVlfvaFexu6SvJecYGw/0?wx_fmt=jpeg);background-position: 0% 0%;background-repeat: no-repeat;background-size: 100%;-webkit-tap-highlight-color: transparent;" viewBox="0 0 1280 887" width="100%" xmlns="http://www.w3.org/2000/svg"></svg>        </section>        <!-- 文字图片 -->        <section style="margin-top: -273px;transform: translateZ(1.2px) scale(0.3);">            <svg style="background-image: url(https://mmbiz.qpic.cn/mmbiz_png/JpraGu7eGqQ2MclqUTetQpexkpgDHp88gGsZfgxJO78gvkWnwOJIiapia1KFMXhLeg0ocVCovhhuicYTzL7libW18A/0?wx_fmt=png);background-position: 0% 0%;background-repeat: no-repeat;background-size: 100%;-webkit-tap-highlight-color: transparent;" viewBox="0 0 1280 1368" width="100%" xmlns="http://www.w3.org/2000/svg" data-author=></svg>        </section>        <!-- 风景图片 -->        <section style="margin-top: -103px;">            <svg style="background-image: url(https://mmbiz.qpic.cn/mmbiz_jpg/JpraGu7eGqQ2MclqUTetQpexkpgDHp88kgPhiavSyQOqWbUrLobQ99Myy86qkyechyoMOzNTIszmICwCZjh6H9Q/0?wx_fmt=jpeg);background-position: 0% 0%;background-repeat: no-repeat;background-size: 100%;-webkit-tap-highlight-color: transparent;" viewBox="0 0 1280 1421" width="100%" xmlns="http://www.w3.org/2000/svg"></svg>        </section>        <!-- 文字图片 -->        <section style="margin-top: -329px;transform: translateZ(1.2px) scale(0.3);">            <svg style="background-image: url(https://mmbiz.qpic.cn/mmbiz_png/JpraGu7eGqQ2MclqUTetQpexkpgDHp880d3wGKVj8A4t2xHQygjLOK837P0eEnN3SQyicfHdAK2SQCicdxlHBXFA/0?wx_fmt=png);background-position: 0% 0%;background-repeat: no-repeat;background-size: 100%;-webkit-tap-highlight-color: transparent;" viewBox="0 0 2106 1082" width="100%" xmlns="http://www.w3.org/2000/svg" data-author=></svg>        </section>    </section></section>
代码知识
  • CSS属性perspective指定了元素与 z = 0 平面的距离，使具有三维位置变换的元素产生透视效果。translateZ > 0 的三维元素比正常大，而 translateZ < 0 时则比正常小，大小程度由该属性的值决定。
  • 三维元素在视图后面的部分不会绘制出来，即 translateZ 值大于 perspective 属性值的部分。
  • 当该属性值不为 0 和 none 时，容器内元素的层叠关系像是使用了 position: fixed 一样。

懂点君


本文来自网络或网友投稿，如有侵犯您的权益，请发邮件至：aisoutu@outlook.com 我们将第一时间删除。

相关素材

jQuery带缩略图左右滚动广告代码
jQuery带缩略图左右滚动广告代码
JS滚动图片切换_html5+jQuery代码
JS滚动图片切换_html5+jQuery代码
中秋节微信公众号封面模板
中秋节微信公众号封面模板