├── iPhone-SE
    ├── iphoneSE-layout.html
    ├── svg-jpg-gif-demo.html
    └── 仿iphoneSE-layout.html
└── readme.md


/iPhone-SE/iphoneSE-layout.html:
--------------------------------------------------------------------------------
 1 | <section style="display: block;text-align: center;">
 2 |   <div style="display: flex;background-color: #000000;">
 3 |     <div style="display: flex;width: 50%;flex-direction: column;">
 4 |       <div style="display: block;height: 0px !important;"><svg xmlns="http://www.w3.org/2000/svg" opacity="0"
 5 |           height="100%" width="100%" data-filename="03_01.jpg"
 6 |           style="display: flex;background-image: url(&quot;https://mmbiz.qpic.cn/mmbiz_jpg/s37uxK5D5wkricJFMxpvre92DUwwicJsE9zqQ8RA1icXoPIv0J6gZ6qleOqwuibictM7XibTTLfbHYb44uaG9h5eO7zw/640&quot;);background-color: #000000;background-size: 100% auto;background-repeat: no-repeat;padding-top: 100%;width: 100%;transform: rotateZ(0.00deg);-webkit-transform: rotateZ(0.00deg);-moz-transform: rotateZ(0.00deg);-o-transform: rotateZ(0.00deg);-webkit-transform: rotateZ(0.00deg);-moz-transform: rotateZ(0.00deg);-o-transform: rotateZ(0.00deg);">
 7 |           <animate attributeName="opacity" restart="whenNotActive" begin="click" dur="2s" keyTimes="0; 0.01; 0.70; 1"
 8 |             values="0; 1; 1; 0;"></animate>
 9 |         </svg></div>
10 |       <div data-filename="02_01.gif"
11 |         style="display: flex;background-image: url(&quot;https://mmbiz.qpic.cn/mmbiz_gif/s37uxK5D5wkricJFMxpvre92DUwwicJsE9enpTVPfvZRsRBK0wIAUbiacXbxDfP6KFWZzPqX6u9QyOCgwjFbvMtpA/640?wx_fmt=gif&quot;);background-color: rgb(0, 0, 0);background-size: 100%;background-repeat: no-repeat;padding-top: 100%;width: 100%;">
12 |       </div>
13 |       <div style="display: block;height: 0px !important;"><svg xmlns="http://www.w3.org/2000/svg" opacity="0"
14 |           height="100%" width="100%" data-filename="03_02.jpg"
15 |           style="display: flex;background-image: url(&quot;https://mmbiz.qpic.cn/mmbiz_jpg/s37uxK5D5wkricJFMxpvre92DUwwicJsE9nomG0tceMWCnz3bB0VD6L4TA5l9RyMicomr9uwCeCg1UKhs6JkU8hlw/640&quot;);background-color: #000000;background-size: 100% auto;background-repeat: no-repeat;padding-top: 100%;width: 100%;transform: rotateZ(0.00deg);-webkit-transform: rotateZ(0.00deg);-moz-transform: rotateZ(0.00deg);-o-transform: rotateZ(0.00deg);-webkit-transform: rotateZ(0.00deg);-moz-transform: rotateZ(0.00deg);-o-transform: rotateZ(0.00deg);">
16 |           <animate attributeName="opacity" restart="whenNotActive" begin="click" dur="1.5s" keyTimes="0; 0.01; 0.70; 1"
17 |             values="0; 1; 1; 0;"></animate>
18 |         </svg></div><svg data-filename="02_02.jpg" preserveAspectRatio="xMinYMin meet"
19 |         style="display: flex;background-image: url(&quot;https://mmbiz.qpic.cn/mmbiz_jpg/s37uxK5D5wkricJFMxpvre92DUwwicJsE99xMBMr4TDFic25Ir29dF5H6Op5ReDu3HmBibQj4k4HVCqqQI4PllI3PA/640?wx_fmt=jpeg&quot;);background-color: rgb(0, 0, 0);background-size: 100%;background-repeat: no-repeat;width: 100%;"
20 |         viewBox="0 0 540 540" xmlns="http://www.w3.org/2000/svg"></svg>
21 |     </div>
22 |     <div style="display: flex;width: 50%;flex-direction: column;">
23 |       <div style="display: block;height: 0px !important;"><svg data-filename="02_03.gif"
24 |           preserveAspectRatio="xMinYMin meet"
25 |           style="display: flex;background-image: url(&quot;https://mmbiz.qpic.cn/mmbiz_gif/s37uxK5D5wkricJFMxpvre92DUwwicJsE9iasK5KFBY5cJIicEjC97tQMzSFqZEyeF7fpQ1j0GCaNTeZI7hIRlubRg/640?wx_fmt=gif&quot;);background-color: #141414;background-size: 100% auto;background-repeat: no-repeat;width: 100%;margin-top: 50%;transform: rotateZ(0.00deg);-webkit-transform: rotateZ(0.00deg);-moz-transform: rotateZ(0.00deg);-o-transform: rotateZ(0.00deg);-webkit-transform: rotateZ(0.00deg);-moz-transform: rotateZ(0.00deg);-o-transform: rotateZ(0.00deg);"
26 |           viewBox="0 0 540 540" xmlns="http://www.w3.org/2000/svg"></svg></div>
27 |       <div style="display: block;height: 0px !important;"><svg xmlns="http://www.w3.org/2000/svg" opacity="0"
28 |           height="100%" width="100%" data-filename="03_03_15_opt70.gif"
29 |           style="display: flex;background-image: url(&quot;https://mmbiz.qpic.cn/mmbiz_gif/s37uxK5D5wkricJFMxpvre92DUwwicJsE9aCGBUbQOJzns84NFlaUy2MVX3sMXqd6wicBljrmEMd434ns0u35iaReQ/640?wx_fmt=gif&amp;map_gif_id=QEVPusEtaR8d83HpY4LjgqTYK8lV6JKKwV_mykuH6eo&quot;);background-color: #000000;background-size: 100% auto;background-repeat: no-repeat;padding-top: 200%;width: 100%;transform: rotateZ(0.00deg);-webkit-transform: rotateZ(0.00deg);-moz-transform: rotateZ(0.00deg);-o-transform: rotateZ(0.00deg);-webkit-transform: rotateZ(0.00deg);-moz-transform: rotateZ(0.00deg);-o-transform: rotateZ(0.00deg);">
30 |           <animate attributeName="opacity" restart="whenNotActive" begin="click" dur="5s" keyTimes="0; 0.01; 0.70; 1"
31 |             values="0; 1; 1; 0;"></animate>
32 |         </svg></div><svg data-filename="02_03.jpg" preserveAspectRatio="xMinYMin meet"
33 |         style="display: flex;background-image: url(&quot;https://mmbiz.qpic.cn/mmbiz_jpg/s37uxK5D5wkricJFMxpvre92DUwwicJsE9icozDTgDUoZ4gvboyw1rFic8icGoPbQRzE2BT7CqFJC4LCUFHsm1NASzw/640?wx_fmt=jpeg&quot;);background-color: rgb(0, 0, 0);background-size: 100%;background-repeat: no-repeat;width: 100%;"
34 |         viewBox="0 0 540 1080" xmlns="http://www.w3.org/2000/svg"></svg>
35 |     </div>
36 |   </div>
37 |   <div style="display: block;margin-top: -1px;height: 0px !important;"><svg xmlns="http://www.w3.org/2000/svg"
38 |       opacity="0" height="100%" width="100%" data-filename="03_04.jpg"
39 |       style="display: flex;background-image: url(&quot;https://mmbiz.qpic.cn/mmbiz_jpg/s37uxK5D5wkricJFMxpvre92DUwwicJsE9DibdI4ic7ub0AQLLjxH26ZMlLtPaX7iauTFsOk19lT4ibhPexHcUicfnE8g/640&quot;);background-color: #000000;background-size: 100% auto;background-repeat: no-repeat;padding-top: 50%;width: 100%;transform: rotateZ(0.00deg);-webkit-transform: rotateZ(0.00deg);-moz-transform: rotateZ(0.00deg);-o-transform: rotateZ(0.00deg);-webkit-transform: rotateZ(0.00deg);-moz-transform: rotateZ(0.00deg);-o-transform: rotateZ(0.00deg);">
40 |       <animate attributeName="opacity" restart="whenNotActive" begin="click" dur="3s" keyTimes="0; 0.01; 0.70; 1"
41 |         values="0; 1; 1; 0;"></animate>
42 |     </svg></div>
43 |   <div data-filename="02_04.jpg"
44 |     style="display: block;background-image: url(&quot;https://mmbiz.qpic.cn/mmbiz_jpg/s37uxK5D5wkricJFMxpvre92DUwwicJsE9UfSibxSjxlEI56BKBLgyRBuyQBq23SI1fsQHO00rlsMjSzz4EUbmr0g/640?wx_fmt=jpeg&quot;);background-color: rgb(0, 0, 0);background-size: 100%;background-repeat: no-repeat;padding-top: 50%;width: 100%;margin-top: -1px;">
45 |   </div>
46 |   <div style="display: block;height: 0px !important;"><svg data-filename="03_05.jpg" height="100%" opacity="0"
47 |       style="display: flex;background-image: url(&quot;https://mmbiz.qpic.cn/mmbiz_jpg/s37uxK5D5wkricJFMxpvre92DUwwicJsE95QukZ1xxqA0JBmRlgJ24G4ricPjiascKhkcyoB5NMR6yQqtaKjecgjpQ/640?wx_fmt=jpeg&quot;);background-color: #000000;background-size: 100% auto;background-repeat: no-repeat;padding-top: 50%;width: 100%;transform: rotateZ(0.00deg);-webkit-transform: rotateZ(0.00deg);-moz-transform: rotateZ(0.00deg);-o-transform: rotateZ(0.00deg);-webkit-transform: rotateZ(0.00deg);-moz-transform: rotateZ(0.00deg);-o-transform: rotateZ(0.00deg);"
48 |       width="100%" xmlns="http://www.w3.org/2000/svg">
49 |       <animate attributeName="opacity" restart="whenNotActive" begin="click" dur="3s" keyTimes="0; 0.01; 0.70; 1"
50 |         values="0; 1; 1; 0;"></animate>
51 |     </svg></div>
52 |   <div data-filename="02_05.jpg"
53 |     style="display: block;background-image: url(&quot;https://mmbiz.qpic.cn/mmbiz_jpg/s37uxK5D5wkricJFMxpvre92DUwwicJsE9zEMDavgTRgtnvPRBGkOOib33bDiaR5xs6iatia5gZicEbnUB0qC2r7t4Caw/640?wx_fmt=jpeg&quot;);background-color: rgb(0, 0, 0);background-size: 100%;background-repeat: no-repeat;padding-top: 50%;width: 100%;">
54 |   </div>
55 | 
56 | </section>


--------------------------------------------------------------------------------
/iPhone-SE/svg-jpg-gif-demo.html:
--------------------------------------------------------------------------------
 1 | 
 2 | <!-- svg-jpg-jpg  -->
 3 | <div style="display: block;margin-top: -1px;height: 0px !important;">
 4 |   
 5 |   <svg xmlns="http://www.w3.org/2000/svg"
 6 |     opacity="0" height="100%" width="100%" data-filename="03_04.jpg"
 7 |     style="display: flex;background-image: url(&quot;https://mmbiz.qpic.cn/mmbiz_png/PgAJE9xP4ibumS8ZorlXKr05qDNO40JDeIoMd3cS28LPKDm89QiaTXVneu2IHdapS2J1NGUxmBjBBaVKL9pKicQHA/0?wx_fmt=png&quot;);background-color: #2fc4b2;background-size: 100% auto;background-repeat: no-repeat;padding-top: 64.27%;width: 100%;transform: rotateZ(0.00deg);-webkit-transform: rotateZ(0.00deg);-moz-transform: rotateZ(0.00deg);-o-transform: rotateZ(0.00deg);-webkit-transform: rotateZ(0.00deg);-moz-transform: rotateZ(0.00deg);-o-transform: rotateZ(0.00deg);">
 8 |     <animate attributeName="opacity" restart="whenNotActive" begin="click" dur="3s" keyTimes="0; 0.01; 0.70; 1"
 9 |       values="0; 1; 1; 0;"></animate>
10 |   </svg></div>
11 | 
12 | <div data-filename="02_04.jpg"
13 |   style="display: block;background-image: url(&quot;https://mmbiz.qpic.cn/mmbiz_png/PgAJE9xP4ibumS8ZorlXKr05qDNO40JDeAT0OMqiaTVTv8xwukiaOiatQrLice4RSvHpwzLSeHbQMKicrALy9fKkic30g/0?wx_fmt=png&quot;);background-color: #2fc4b2;;background-size: 100%;background-repeat: no-repeat;padding-top: 64.27%;width: 100%;margin-top: -1px;">
14 | </div>
15 | 
16 | 
17 | <!-- svg-jpg-gif  -->
18 | <div style="display: block;margin-top: -1px;height: 0px !important;">
19 |   
20 |   <svg xmlns="http://www.w3.org/2000/svg"
21 |     opacity="0" height="100%" width="100%" data-filename="03_04.jpg"
22 |     style="display: flex;background-image: url(&quot;https://mmbiz.qpic.cn/mmbiz_gif/PgAJE9xP4ibumS8ZorlXKr05qDNO40JDeiaU19L09fxhBfGLbyGdrJaXSMUJsV9qEoWEjLbZiaNuvpXX1rxZAvIuw/0?wx_fmt=gif&quot;);background-color: #2fc4b2;background-size: 100% auto;background-repeat: no-repeat;padding-top: 64.27%;width: 100%;transform: rotateZ(0.00deg);-webkit-transform: rotateZ(0.00deg);-moz-transform: rotateZ(0.00deg);-o-transform: rotateZ(0.00deg);-webkit-transform: rotateZ(0.00deg);-moz-transform: rotateZ(0.00deg);-o-transform: rotateZ(0.00deg);">
23 |     <animate attributeName="opacity" restart="whenNotActive" begin="click" dur="4s" keyTimes="0; 0.01; 0.70; 1"
24 |       values="0; 1; 1; 0;"></animate>
25 |   </svg></div>
26 | 
27 | <div data-filename="02_04.jpg"
28 |   style="display: block;background-image: url(&quot;https://mmbiz.qpic.cn/mmbiz_png/PgAJE9xP4ibumS8ZorlXKr05qDNO40JDeAT0OMqiaTVTv8xwukiaOiatQrLice4RSvHpwzLSeHbQMKicrALy9fKkic30g/0?wx_fmt=png&quot;);background-color: #2fc4b2;;background-size: 100%;background-repeat: no-repeat;padding-top: 64.27%;width: 100%;margin-top: -1px;">
29 | </div>
30 | 
31 | 
32 | <!-- svg-gif-gif  -->
33 | <div style="display: block;margin-top: -1px;height: 0px !important;">
34 |   
35 |   <svg xmlns="http://www.w3.org/2000/svg"
36 |     opacity="0" height="100%" width="100%" data-filename="03_04.jpg"
37 |     style="display: flex;background-image: url(&quot;https://mmbiz.qpic.cn/mmbiz_gif/PgAJE9xP4ibumS8ZorlXKr05qDNO40JDeiaU19L09fxhBfGLbyGdrJaXSMUJsV9qEoWEjLbZiaNuvpXX1rxZAvIuw/0?wx_fmt=gif&quot;);background-color: #2fc4b2;background-size: 100% auto;background-repeat: no-repeat;padding-top: 64.27%;width: 100%;transform: rotateZ(0.00deg);-webkit-transform: rotateZ(0.00deg);-moz-transform: rotateZ(0.00deg);-o-transform: rotateZ(0.00deg);-webkit-transform: rotateZ(0.00deg);-moz-transform: rotateZ(0.00deg);-o-transform: rotateZ(0.00deg);">
38 |     <animate attributeName="opacity" restart="whenNotActive" begin="click" dur="4s" keyTimes="0; 0.01; 0.70; 1"
39 |       values="0; 1; 1; 0;"></animate>
40 |   </svg></div>
41 | 
42 | <div data-filename="02_04.jpg"
43 |   style="display: block;background-image: url(&quot;https://mmbiz.qpic.cn/mmbiz_gif/PgAJE9xP4ibumS8ZorlXKr05qDNO40JDewzUcib2jCswoq2By0n87n5Z9numlpRSwWkCA7PFQjrzxZL4xlqoPPRw/0?wx_fmt=gif&quot;);background-color: #2fc4b2;;background-size: 100%;background-repeat: no-repeat;padding-top: 64.27%;width: 100%;margin-top: -1px;">
44 | </div>


--------------------------------------------------------------------------------
/iPhone-SE/仿iphoneSE-layout.html:
--------------------------------------------------------------------------------
 1 | <section style="display: block;text-align: center;">
 2 | 
 3 |   <div style="display: flex;background-color:#2fc4b2;">
 4 |     <div style="display: flex;width: 50%;flex-direction: column;">
 5 |       <!-- A -->
 6 |       <div style="display: block;height: 0px !important;">
 7 |         <!-- A2 --> 
 8 |         <svg xmlns="http://www.w3.org/2000/svg" opacity="0"
 9 |           height="100%" width="100%" data-filename="A2"
10 |           
11 |           style="display: flex;background-image: url(&quot;https://mmbiz.qpic.cn/mmbiz_png/PgAJE9xP4ibumS8ZorlXKr05qDNO40JDeLdvqdFvvZ1WePL7oMwg7CnggZlkMvm7d3wFDbYic51KLFXg6YHEe2Rw/0?wx_fmt=png&quot;);background-color: #2fc4b2;background-size: 100% auto;background-repeat: no-repeat;padding-top: 100%;width: 100%;transform: rotateZ(0.00deg);-webkit-transform: rotateZ(0.00deg);-moz-transform: rotateZ(0.00deg);-o-transform: rotateZ(0.00deg);-webkit-transform: rotateZ(0.00deg);-moz-transform: rotateZ(0.00deg);-o-transform: rotateZ(0.00deg);">
12 |           <animate attributeName="opacity" restart="whenNotActive" begin="click" dur="2s" keyTimes="0; 0.01; 0.70; 1"
13 |             values="0; 1; 1; 0;"></animate>
14 |         </svg></div>
15 | 
16 |       <!-- A2 -->
17 |       <div data-filename="A1"
18 |         style="display: flex;background-image: url(&quot;https://mmbiz.qpic.cn/mmbiz_png/PgAJE9xP4ibumS8ZorlXKr05qDNO40JDeDias8via71VtnTpK97UDOkeAcHA7evp7snt8oH5uiafkbkrsy3KBJG8Cg/0?wx_fmt=png&quot;);background-color: #2fc4b2;;background-size: 100%;background-repeat: no-repeat;padding-top: 100%;width: 100%;">
19 |       </div>
20 | 
21 |       <!-- B -->
22 |       <div style="display: block;height: 0px !important;">
23 |         <!-- B2  -->
24 |         <svg xmlns="http://www.w3.org/2000/svg" opacity="0"
25 |       
26 |           height="100%" width="100%" data-filename="03_02.jpg"
27 |           style="display: flex;background-image: url(&quot;https://mmbiz.qpic.cn/mmbiz_png/PgAJE9xP4ibumS8ZorlXKr05qDNO40JDe71kf7SlILNC1Xq6zplw4SkHTwkdr4xARsWNc0Ij2IOEibAnS764pcOg/0?wx_fmt=png&quot;);background-color: #2fc4b2;background-size: 100% auto;background-repeat: no-repeat;padding-top: 100%;width: 100%;transform: rotateZ(0.00deg);-webkit-transform: rotateZ(0.00deg);-moz-transform: rotateZ(0.00deg);-o-transform: rotateZ(0.00deg);-webkit-transform: rotateZ(0.00deg);-moz-transform: rotateZ(0.00deg);-o-transform: rotateZ(0.00deg);">
28 |           <animate attributeName="opacity" restart="whenNotActive" begin="click" dur="1.5s" keyTimes="0; 0.01; 0.70; 1"
29 |             values="0; 1; 1; 0;"></animate>
30 |         </svg></div>
31 | 
32 |       <!-- B1  -->
33 |       <svg data-filename="02_02.jpg" preserveAspectRatio="xMinYMin meet"
34 |       
35 |         style="display: flex;background-image: url(&quot;https://mmbiz.qpic.cn/mmbiz_png/PgAJE9xP4ibumS8ZorlXKr05qDNO40JDexjP18CD0zBdxknp2sgJg9yTy7ffeSDk4s0TP9wesMyV6qrVotEia44g/0?wx_fmt=png&quot;);background-color: #2fc4b2;;background-size: 100%;background-repeat: no-repeat;width: 100%;"
36 |         viewBox="0 0 540 540" xmlns="http://www.w3.org/2000/svg"></svg>
37 |     </div>
38 | 
39 |     <!-- C  -->
40 |     <div style="display: flex;width: 50%;flex-direction: column;">
41 |       <div style="display: block;height: 0px !important;">
42 | 
43 |         <!-- C2  -->
44 |         <svg xmlns="http://www.w3.org/2000/svg" opacity="0"
45 |           height="100%" width="100%" data-filename="03_03_15_opt70.gif"
46 |           style="display: flex;background-image: url(&quot;https://mmbiz.qpic.cn/mmbiz_gif/PgAJE9xP4ibumS8ZorlXKr05qDNO40JDeIKVtUW1bzKqfcQeLb0yyMibRfLVyvAJKetn1kDvub6tAiaGdzsSTshlg/0?wx_fmt=gif&quot;);background-color: #2fc4b2;background-size: 100% auto;background-repeat: no-repeat;padding-top: 200%;width: 100%;transform: rotateZ(0.00deg);-webkit-transform: rotateZ(0.00deg);-moz-transform: rotateZ(0.00deg);-o-transform: rotateZ(0.00deg);-webkit-transform: rotateZ(0.00deg);-moz-transform: rotateZ(0.00deg);-o-transform: rotateZ(0.00deg);">
47 |           <animate attributeName="opacity" restart="whenNotActive" begin="click" dur="5s" keyTimes="0; 0.01; 0.70; 1"
48 |             values="0; 1; 1; 0;"></animate>
49 |         </svg></div>
50 |       <!-- C1  -->
51 |       <svg data-filename="02_03.jpg" preserveAspectRatio="xMinYMin meet"
52 |         style="display: flex;background-image: url(&quot;https://mmbiz.qpic.cn/mmbiz_png/PgAJE9xP4ibumS8ZorlXKr05qDNO40JDeD4qVWyk8rZypkvOSDKDHa0EhVHbk6xIXXiaibwuOsBQ1ADhPd2bMFIrw/0?wx_fmt=png&quot;);background-color: #2fc4b2;;background-size: 100%;background-repeat: no-repeat;width: 100%;"
53 |         viewBox="0 0 540 1080" xmlns="http://www.w3.org/2000/svg"></svg>
54 |     </div>
55 |   </div>
56 | 
57 |   <!-- D  -->
58 |   <div style="display: block;margin-top: -1px;height: 0px !important;">
59 |     <!-- D2  -->
60 |     <svg xmlns="http://www.w3.org/2000/svg"
61 |       opacity="0" height="100%" width="100%" data-filename="03_04.jpg"
62 |       style="display: flex;background-image: url(&quot;https://mmbiz.qpic.cn/mmbiz_png/PgAJE9xP4ibumS8ZorlXKr05qDNO40JDeUoSTNwEq3yZ5PryE3nFP2icupXkmQym2hKHYiajiacyjnSfOonQjpS3Vw/0?wx_fmt=png&quot;);background-color: #2fc4b2;background-size: 100% auto;background-repeat: no-repeat;padding-top: 50%;width: 100%;transform: rotateZ(0.00deg);-webkit-transform: rotateZ(0.00deg);-moz-transform: rotateZ(0.00deg);-o-transform: rotateZ(0.00deg);-webkit-transform: rotateZ(0.00deg);-moz-transform: rotateZ(0.00deg);-o-transform: rotateZ(0.00deg);">
63 |       <animate attributeName="opacity" restart="whenNotActive" begin="click" dur="3s" keyTimes="0; 0.01; 0.70; 1"
64 |         values="0; 1; 1; 0;"></animate>
65 |     </svg></div>
66 |     <!-- D1  -->
67 |   <div data-filename="02_04.jpg"
68 |     style="display: block;background-image: url(&quot;https://mmbiz.qpic.cn/mmbiz_png/PgAJE9xP4ibumS8ZorlXKr05qDNO40JDe5ddX7xnib03kE1iaEzshg1uVib0vn4ejV0dDwOxUexvrZHYhCyjLTDaHA/0?wx_fmt=png&quot;);background-color: #2fc4b2;;background-size: 100%;background-repeat: no-repeat;padding-top: 50%;width: 100%;margin-top: -1px;">
69 |   </div>
70 | 
71 |   <!-- E -->
72 |   <div style="display: block;height: 0px !important;">
73 |     <!-- E2 -->
74 |     <svg data-filename="03_05.jpg" height="100%" opacity="0"
75 |       style="display: flex;background-image: url(&quot;https://mmbiz.qpic.cn/mmbiz_png/PgAJE9xP4ibumS8ZorlXKr05qDNO40JDekcYaAyVic2LCaPyNdrvpFbplt1uKpKEKib4rtpmWiaVYEEYm5eVOXHmOg/0?wx_fmt=png&quot;);background-color: #2fc4b2;background-size: 100% auto;background-repeat: no-repeat;padding-top: 50%;width: 100%;transform: rotateZ(0.00deg);-webkit-transform: rotateZ(0.00deg);-moz-transform: rotateZ(0.00deg);-o-transform: rotateZ(0.00deg);-webkit-transform: rotateZ(0.00deg);-moz-transform: rotateZ(0.00deg);-o-transform: rotateZ(0.00deg);"
76 |       width="100%" xmlns="http://www.w3.org/2000/svg">
77 |       <animate attributeName="opacity" restart="whenNotActive" begin="click" dur="3s" keyTimes="0; 0.01; 0.70; 1"
78 |         values="0; 1; 1; 0;"></animate>
79 |     </svg></div>
80 |     <!-- E1 -->
81 |   <div data-filename="02_05.jpg"
82 |     style="display: block;background-image: url(&quot;https://mmbiz.qpic.cn/mmbiz_png/PgAJE9xP4ibumS8ZorlXKr05qDNO40JDehavdE5TPicyIKd9cWWCOsZTWcWdgiaqYunlIgjL8Lq60qLT6liaiaqb33A/0?wx_fmt=png&quot;);background-color: #2fc4b2;;background-size: 100%;background-repeat: no-repeat;padding-top: 50%;width: 100%;">
83 |   </div>
84 | </section>


--------------------------------------------------------------------------------
/readme.md:
--------------------------------------------------------------------------------
  1 | ![](https://chendongze.oss-cn-shanghai.aliyuncs.com/ipic/9gjn3.png)
  2 | 
  3 | ---
  4 | 
  5 | >  **Apple 微信公众号**的排版效果总是让人眼前一亮，精致的细节、酷炫的动画让人不得不佩服 Apple 团队的用心与专业。
  6 | > 经过源码分析后发现，Apple 的微信公众号在排版上用了一些**黑科技**，其中包括了 SVG、Flex Layout、Chrome Inspect 等 Web 前端技术。
  7 | > **我今天就给大家分享下，Apple 微信公众号的效果是如何制作出来的。**
  8 | 
  9 | ## 效果展示
 10 | 我们来看下 iPhone SE 发布的那篇文章的展示效果
 11 | 效果图：
 12 | ![](https://chendongze.oss-cn-shanghai.aliyuncs.com/ipic/9i5r1.gif)
 13 | 
 14 | ## 布局剖析
 15 | 
 16 | 我们来分析下上面的布局效果：排版共有 5个模块组成。
 17 | 我们分别用 A、B、C、D、E 来标记。如下图：
 18 | ![](https://chendongze.oss-cn-shanghai.aliyuncs.com/ipic/86q1k.png)
 19 | 排版剖析:
 20 | 
 21 | 如果你稍懂 CSS，那么实现这样的布局是非常简单的。Apple 用的方式是使用 Flex Layout：
 22 | 
 23 | ```html
 24 | <div style="display: flex">
 25 |     <div style="display: flex;width: 50%; flex-direction: column;">
 26 |          <div style="display: block;">
 27 |                  <!-- 内容 A -->
 28 |          </div>
 29 |         <div style="display: block;">
 30 |                 <!-- 内容 B -->
 31 |          </div>
 32 |     </div>
 33 |     <div style="display: flex;width: 50%;flex-direction:column;">
 34 | <!-- 内容 C -->
 35 |     </div>
 36 |     <div style="display: flex;flex-direction:column;">
 37 | <!-- 内容 D -->
 38 |     </div>
 39 |     <div style="display: flex; flex-direction:column;">
 40 | <!-- 内容 E -->
 41 |     </div>
 42 | </div>
 43 | ```
 44 | [完整源码](https://github.com/netpi/wechat-layout)
 45 | 
 46 | 然而，微信官方的内容编辑器并不支持直接编辑 HTML，不过这难不倒我们，我们要使用一些简单的黑科技（后文会说明）就能把代码提交到微信后端，实现 Flex Layout 效果。
 47 | 
 48 | ## 点击事件、动效
 49 | 
 50 | 我们发现，Apple 的ABCDE每个模块都有点击事件，然而微信公众号并不支持 JS，那么点击事件是如何添加的的呢？
 51 | 其实，Apple 团队采用 `SVG + JPEG/GIF 组合方案` 来给图片增加点击事件和动效的。** 我们来看下效果：
 52 | 
 53 | **1，SVG + JPEG + JPEG**
 54 | **完整效果，请用微信扫描文章顶部二维码：**
 55 | ![](https://chendongze.oss-cn-shanghai.aliyuncs.com/ipic/1w8n1.gif)
 56 | 
 57 | **2，SVG + JPEG + GIF**
 58 | **完整效果，请用微信扫描文章顶部二维码：**
 59 | ![](https://chendongze.oss-cn-shanghai.aliyuncs.com/ipic/3mxkj.gif)
 60 | 
 61 | **3，SVG + GIF + GIF**
 62 | **完整效果，请用微信扫描文章顶部二维码：**
 63 | ![](https://chendongze.oss-cn-shanghai.aliyuncs.com/ipic/hg30g.gif)
 64 | 
 65 | 之所以可以实现上述效果，是因为我们利用SVG给图片增加了点击事件。由于在 SVG 中 使用  `animate 标签` 可以添加事件，同时 animate 本身就有动画效果， 因此使用SVG，微信文章中的图片就拥有了交互能力。
 66 | 
 67 | 使用这部分代码时，只需要将图片1、图片2 的URL替换成，你已经上传到微信图库中图片的 URL 即可实现上述效果。
 68 | 
 69 | 当我们把 JPEG 用 GIF 来代替时，可以组合的效果选择就丰富多了。比如上面演示的 ``SVG + JPEG + GIF` 和 `SVG + JPEG + GIF`。
 70 | 
 71 | 实现这个效果的主要代码如下：
 72 | ```html
 73 | ...
 74 | <div style="display: flex;width: 100%;flex-direction: column;">
 75 |     <svg xmlns="http://www.w3.org/2000/svg" 
 76 |           style="background-image: 
 77 |         url(图片2微信图库URL);">
 78 |         <animate attributeName="opacity"begin="click">
 79 |         </animate>
 80 |     </svg>
 81 |     <div
 82 |       background-image: 
 83 | url(&quot;图片1微信图库URL&quot;);">
 84 |     </div>
 85 | </div>
 86 | ...
 87 | ```
 88 | [完整源码](https://github.com/netpi/wechat-layout)
 89 | - - - - - 
 90 | 
 91 | ## 用 Chrome Inspect 提交代码
 92 | 
 93 | 我们知道，微信公众号的编辑器是不支持直接修改文章 HTML 的。那么我们该如何才能把编辑好的代码提交到微信后台呢？
 94 | 这时候我们就要用到 `Chrome Inspect`，对于做前端的同学来说，Chrome Inspect 是调试过程中离不开的工具，它可以直接帮助我们修改前端 HTML 代码。因此提交代码的步骤是：
 95 | 1. 用 Chrome 浏览器打开微信公众号的图文编辑器，在文章中随意输入一句话
 96 | 2. 右键点击网页空白处，选择 `Inspect` 。
 97 | 3. 打开 Inspect 后，用 Inspect 左上角的选择器选中最开始输入的内容，右键点击 <p> 标签，选择 `Edit as HTML`
 98 | 4. 贴入代码（Flex 或 SVG），就能看到效果。
 99 | ![](https://chendongze.oss-cn-shanghai.aliyuncs.com/ipic/666cd.jpg)
100 | 
101 | ## Flex Layout + SVG + Chrome Inspect 实现苹果动效
102 | 
103 | 我们了解了 Apple  公众号的效果是如何实现的了，下面那么我们来实践一下。
104 | 
105 | **完整效果，请用微信扫描文章顶部二维码：**
106 | 
107 | ![](https://chendongze.oss-cn-shanghai.aliyuncs.com/ipic/flm9g.gif)
108 | 
109 | - - - - - 
110 | 为了让大家方便使用，我已经把代码整理好提交到了 Github，点击 [完整源码](https://github.com/netpi/wechat-layout) 即可获得。
111 | 


--------------------------------------------------------------------------------