评论

如何用SVG代码排版公众号文章

如何用SVG代码排版公众号文章



案例代码

<section style="width: 345px;margin: 0px auto;font-size: 0px;line-height: 0;">
    <section style="overflow: hidden;">
        <section style="height: 0px;">
            <section style="padding-top: 500px;margin: 0px auto;font-size: 0px;line-height: 0;">
                <section style="width: 345px;height: 2500px;background-position: 0px 0px;background-repeat: no-repeat;background-size: 100%;background-image: url(https://mmbiz.qpic.cn/mmbiz_jpg/JpraGu7eGqS3XzaoEexZuQycqusR5zvgmp9rnRyDoIBz1iag3bLZrKasw1m5iaDTlvrY1vpJocku4kwK6IvEgRHA/0?wx_fmt=jpeg);"></section>
            </section>
        </section>
        <section style="background-position: 0px 0px;background-size: 100% 500px;background-repeat: no-repeat;background-image: url(https://mmbiz.qpic.cn/mmbiz_jpg/JpraGu7eGqS3XzaoEexZuQycqusR5zvgLHQfib9uS78vUI4rG4RZvJOAJibLeykkA1xaNJ32Ku3ZgMyeu283LIbQ/0?wx_fmt=jpeg);">
            <svg height="500px" style="background-size: 100% 500px; background-repeat: no-repeat;background-position: center top;background-color: rgb(0, 0, 0);background-image: url(https://mmbiz.qpic.cn/mmbiz_jpg/JpraGu7eGqS3XzaoEexZuQycqusR5zvg1ymWUDTGBkHF6ia3qCm7EwcuYJb2lkDsFuV89RQS9lPaiaLop1z7RZ6g/0?wx_fmt=jpeg);width: 100%;height: 500px;" viewBox="0 0 345 500" xmlns="http://www.w3.org/2000/svg" width="1">
                <animate attributeName="width" style="box-sizing: border-box;" fill="freeze" to="0" from="100" duration="0.01" begin="click+0.6s"></animate>
                <animate attributeName="opacity" style="box-sizing: border-box;" fill="freeze" dur="0.01s" begin="click+0.6s" from="1" to="0"></animate>
                <animate attributeName="height" fill="freeze" restart="never" calcMode="spline" keySplines="0.42 0 0.58 1.0; 0.42 0 0.58 1.0; 0.42 0 0.58 1.0" values="500; 0; 3000; 3000" dur="6s" begin="click+0.1s" keyTimes="0; 0.1; 0.5; 1"></animate>
            </svg>
        </section>
    </section>
</section>


最后一次编辑于  2020-07-01  
点赞 3
收藏
评论

2 个评论

  • Ages
    Ages
    2021-04-15

    你好,能私信一下吗?想加你微信咨询一下,谢谢

    2021-04-15
    赞同
    回复 2
    • 梦幻雪冰
      梦幻雪冰
      2021-04-15
      可以的,dong_dian_jun
      2021-04-15
      回复
    • 梦幻雪冰
      梦幻雪冰
      2021-04-15
      你加我一下
      2021-04-15
      回复
  • 胡Sir
    胡Sir
    2020-08-26

    找了很久的代码,终于找到了,感谢!

    2020-08-26
    赞同
    回复 3
    • 梦幻雪冰
      梦幻雪冰
      2020-08-26
      不客气的,可以关注我的视频号·懂点君
      2020-08-26
      回复
    • 金小天
      金小天
      2020-11-17回复梦幻雪冰
      大哥你有公众号吗我能加你吗
      2020-11-17
      回复
    • 梦幻雪冰
      梦幻雪冰
      2020-11-17回复金小天
      我已经私信你了,添加我微信即可
      2020-11-17
      回复
登录 后发表内容