refrence https://www.jianshu.com/p/8c2e4fc26e8a

方案1:切分gif图片成多个小片段,135编辑器上传图片,设置左浮动,复制到微信 方案2:切分gif图片成多个小片段,html编辑svg代码,135编辑器复制到微信或者公众号后台用开发者工具改html代码

https://www.135editor.com/

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98


<section data-role="outer" label="" style="font-size: 16px;">
    <section data-role="outer" label="">
        <section style="width: 100%;">
            <section style="text-align: center;line-height: 0;margin-top: -1px !important;"></section>
            <section style="margin-top: -1px !important;">
                <section>
                    <section style="overflow: hidden;width: 100% !important;height: auto !important;">
                        <section style="height: 0px !important;">
                            <svg style="box-sizing: border-box;background-image: url(&quot;https://mmbiz.qpic.cn/mmbiz_gif/O94DhnNo0dLBviaM1szuFT6cQoOqE5aVZMvHuzfdnqLnD4CtgdgsQUJNIaBpEzkwzal9ibpOxBYia1icGBBViaAyJyw/640?wx_fmt=gif&quot;);background-size: 100% 100%;background-position: center center;background-repeat: no-repeat;transform: rotateZ(0.02deg);-webkit-transform: rotateZ(0.02deg);-moz-transform: rotateZ(0.02deg);-ms-transform: rotateZ(0.02deg);-o-transform: rotateZ(0.02deg);"
                                version="1.1" viewbox="0 0 750 530" xmlns="http://www.w3.org/2000/svg"></svg>
                        </section>
                        <section style="height: 0px !important;">
                            <svg style="box-sizing: border-box;background-image: url(&quot;https://mmbiz.qpic.cn/mmbiz_jpg/O94DhnNo0dLBviaM1szuFT6cQoOqE5aVZDec0MibUTZcnNE1sU31WXaY2tib5qIUKUeY1ibbveNWicuFHpnCibCPreLQ/640?wx_fmt=jpeg&quot;);background-size: 100% 100%;background-position: center center;background-repeat: no-repeat;opacity: 0;transform: rotateZ(0.02deg);-webkit-transform: rotateZ(0.02deg);-moz-transform: rotateZ(0.02deg);-ms-transform: rotateZ(0.02deg);-o-transform: rotateZ(0.02deg);"
                                version="1.1" viewbox="0 0 750 530" xmlns="http://www.w3.org/2000/svg">
                                <animate attributename="opacity" to="0" begin="0.01s" dur="0.01s" repeatcount="1"
                                    fill="freeze" calcmode="discrete"></animate>
                                <animate attributename="opacity" values="0;1" begin="click" dur="1s" repeatcount="1"
                                    fill="freeze" calcmode="linear" restart="never"></animate>
                            </svg>
                        </section>
                        <section style="padding-top: 70.66%;height: 70px;overflow: hidden;box-sizing: border-box;">
                            <br />
                        </section>
                    </section>
                </section>
            </section>
            <section style="width: 100%;margin-top: -1px !important;">
                <section style="overflow: hidden;width: 100% !important;height: auto !important;">
                    <section style="height: 0px !important;">
                        <svg style="box-sizing: border-box;background-image: url(&quot;https://mmbiz.qpic.cn/mmbiz_gif/O94DhnNo0dLBviaM1szuFT6cQoOqE5aVZicibHUAt8grhCWGWrxD7vLlgAY7fSdt05d8xfHNUaSYQvdCTibQdxR5xA/640?wx_fmt=gif&quot;);background-size: 100% 100%;background-position: center center;background-repeat: no-repeat;transform: rotateZ(0.02deg);-webkit-transform: rotateZ(0.02deg);-moz-transform: rotateZ(0.02deg);-ms-transform: rotateZ(0.02deg);-o-transform: rotateZ(0.02deg);"
                            version="1.1" viewbox="0 0 750 374" xmlns="http://www.w3.org/2000/svg"></svg>
                    </section>
                    <section style="height: 0px !important;">
                        <svg style="box-sizing: border-box;background-image: url(&quot;https://mmbiz.qpic.cn/mmbiz_jpg/O94DhnNo0dLBviaM1szuFT6cQoOqE5aVZKBI9BSr3gwxkko2hEIiahBljMOmwW1uonRLStIpKEH6GxAgYEjkh6Nw/640?wx_fmt=jpeg&quot;);background-size: 100% 100%;background-position: center center;background-repeat: no-repeat;opacity: 0;transform: rotateZ(0.02deg);-webkit-transform: rotateZ(0.02deg);-moz-transform: rotateZ(0.02deg);-ms-transform: rotateZ(0.02deg);-o-transform: rotateZ(0.02deg);"
                            version="1.1" viewbox="0 0 750 374" xmlns="http://www.w3.org/2000/svg">
                            <animate attributename="opacity" to="0" begin="0.01s" dur="0.01s" repeatcount="1"
                                fill="freeze" calcmode="discrete"></animate>
                            <animate attributename="opacity" values="0;1" begin="click" dur="1s" repeatcount="1"
                                fill="freeze" calcmode="linear" restart="never"></animate>
                        </svg>
                    </section>
                    <section style="padding-top: 49.86%;height: 49px;overflow: hidden;box-sizing: border-box;">
                        <br />
                    </section>
                </section>
            </section>
            <section style="width: 100%;margin-top: -1px !important;">
                <section style="overflow: hidden;width: 100% !important;height: auto !important;">
                    <section style="height: 0px !important;">
                        <svg style="box-sizing: border-box;background-image: url(&quot;https://mmbiz.qpic.cn/mmbiz_gif/O94DhnNo0dLBviaM1szuFT6cQoOqE5aVZM0LtAicdb2UbWAI4mcpsvkX4veOeR8s1JnEic6OcZpJibvqqF1WZiad6Fg/640?wx_fmt=gif&quot;);background-size: 100% 100%;background-position: center center;background-repeat: no-repeat;transform: rotateZ(0.02deg);-webkit-transform: rotateZ(0.02deg);-moz-transform: rotateZ(0.02deg);-ms-transform: rotateZ(0.02deg);-o-transform: rotateZ(0.02deg);"
                            version="1.1" viewbox="0 0 750 284" xmlns="http://www.w3.org/2000/svg"></svg>
                    </section>
                    <section style="height: 0px !important;">
                        <svg style="box-sizing: border-box;background-image: url(&quot;https://mmbiz.qpic.cn/mmbiz_jpg/O94DhnNo0dLBviaM1szuFT6cQoOqE5aVZdSWzOQqZxM28XwrZwkYQnS8menyfVXPP7vic8MVgW6aibgicvGDtlDUiaQ/640?wx_fmt=jpeg&quot;);background-size: 100% 100%;background-position: center center;background-repeat: no-repeat;opacity: 0;transform: rotateZ(0.02deg);-webkit-transform: rotateZ(0.02deg);-moz-transform: rotateZ(0.02deg);-ms-transform: rotateZ(0.02deg);-o-transform: rotateZ(0.02deg);"
                            version="1.1" viewbox="0 0 750 284" xmlns="http://www.w3.org/2000/svg">
                            <animate attributename="opacity" to="0" begin="0.01s" dur="0.01s" repeatcount="1"
                                fill="freeze" calcmode="discrete"></animate>
                            <animate attributename="opacity" values="0;1" begin="click" dur="1s" repeatcount="1"
                                fill="freeze" calcmode="linear" restart="never"></animate>
                        </svg>
                    </section>
                    <section style="padding-top: 37.86%;height: 37px;overflow: hidden;box-sizing: border-box;">
                        <br />
                    </section>
                </section>
            </section>
            <section style="width: 100%;margin-top: -1px !important;">
                <section style="overflow: hidden;width: 100% !important;height: auto !important;">
                    <section style="height: 0px !important;">
                        <svg style="box-sizing: border-box;background-image: url(&quot;https://mmbiz.qpic.cn/mmbiz_gif/O94DhnNo0dLBviaM1szuFT6cQoOqE5aVZseWSpLxibqY6mvfbxgj96WKbdAibfOeicon7VR6TW1muwv0e3AdAmKCZA/640?wx_fmt=gif&quot;);background-size: 100% 100%;background-position: center center;background-repeat: no-repeat;transform: rotateZ(0.02deg);-webkit-transform: rotateZ(0.02deg);-moz-transform: rotateZ(0.02deg);-ms-transform: rotateZ(0.02deg);-o-transform: rotateZ(0.02deg);"
                            version="1.1" viewbox="0 0 750 529" xmlns="http://www.w3.org/2000/svg"></svg>
                    </section>
                    <section style="height: 0px !important;">
                        <svg style="box-sizing: border-box;background-image: url(&quot;https://mmbiz.qpic.cn/mmbiz_jpg/O94DhnNo0dLBviaM1szuFT6cQoOqE5aVZA3xzkiaTGc50VWumjvt4f1xv2vnARPFpZOlEQO7KTS9JzhAwzYbhDDw/640?wx_fmt=jpeg&quot;);background-size: 100% 100%;background-position: center center;background-repeat: no-repeat;opacity: 0;transform: rotateZ(0.02deg);-webkit-transform: rotateZ(0.02deg);-moz-transform: rotateZ(0.02deg);-ms-transform: rotateZ(0.02deg);-o-transform: rotateZ(0.02deg);"
                            version="1.1" viewbox="0 0 750 529" xmlns="http://www.w3.org/2000/svg">
                            <animate attributename="opacity" to="0" begin="0.01s" dur="0.01s" repeatcount="1"
                                fill="freeze" calcmode="discrete"></animate>
                            <animate attributename="opacity" values="0;1" begin="click" dur="1s" repeatcount="1"
                                fill="freeze" calcmode="linear" restart="never"></animate>
                        </svg>
                    </section>
                    <section style="padding-top: 70.53%;height: 70px;overflow: hidden;box-sizing: border-box;">
                        <br />
                    </section>
                </section>
            </section>
            <section style="width: 100%;" class="">
                <section style="line-height: normal;">
                    <span style="display:block;font-size: 12px;color: #ffffff;height:0  !important;">1</span>
                </section>
            </section>
        </section>
    </section>
</section>