preface
With people’s pursuit of beautiful things, there are more and more pictures on a page, especially in the form of pictures + animation for some publicity projects, so we have to think carefully about the processing of pictures. Recently, I explored and improved this when DEVELOPING a project.
Project situation
First, let’s talk about the situation of the project. There are 18 scenes in total, each scene has a large picture, and some animation processing is needed. Meanwhile, vUE framework is used for the development.
thinking
- To ensure that a single page does not load with a blank screen, I first consider methods such as isomorphism.
- Use the image compression tool to compress the image. Make the image as small as possible.
- Small images are merged using sprites.
- Large images are written directly on the page using the IMG tag
reality
Although I made these optimization processing, when I put the project on the test server and checked it with my mobile phone, the pictures on the first screen were still inescapably intermittent, and the page was jammed due to the use of a lot of animation and transition. In general, the experience optimization and improvement failed. Fortunately, my boss left me plenty of time to work on it, so I decided to work on the images and structure of the project myself.
Death start…
First of all, I deleted all PNG, installed Sketch on this book by myself, and consulted the designers about how to use it. The learning cost of this software is not high for primary use. As our front-end developers, they only need to select pictures, ungroup them, and group the ones they want, and such basic operations are ok. The first is the disassembly and analysis of the design draft. First of all, I would like to thank the design here because it is mostly hand-drawn. Basically all the exported SVG images are only 10KB-20KB in size, but there are also 3 images in BMP format. If this is mixed with our SVG and exported, our images will be very large at least 500BK. The three images in our design draft were basically mixed into 18 scenes, that is to say, the first exported images were all very large, so I began to split them, and the result was that 18 main images were about 20KB in size, and 3 BMP images were about 50KB in size in PNG format. This has reduced our image resources by at least five times and reduced the number of web requests.
<? xml version="1.0" encoding="UTF-8"? > <svg width="671px" height="617px" viewBox="0 0 671 617" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> <! -- Generator: Sketch 57 (83077) - https://sketch.com --> <title> Group 2</title> <desc>Created with Sketch.</desc> <defs> <pattern ID ="pattern-1" patternUnits="objectBoundingBox" x="12.4260355%" width="112.426036%" height="100%">
<use xlink:href="#image-2" transform="Scale (0.5275, 0.5275)"></use>
</pattern>
<image id="image-2" width="400" height="400" xlink:href="data:image/png;base64,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"></image>
<pattern id="pattern-3" patternUnits="objectBoundingBox" x="12.4260355%" width="112.426036%" height="100%">
<use xlink:href="#image-4" transform="Scale (0.5275, 0.5275)"></use>
</pattern>
<image id="image-4" width="400" height="400" xlink:href="data:image/png;base64,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"></image>
<pattern id="pattern-5" patternUnits="objectBoundingBox" x="12.4260355%" width="112.426036%" height="100%">
<use xlink:href="#image-6" transform="Scale (0.5275, 0.5275)"></use>
</pattern>
<image id="image-6" width="400" height="400" xlink:href="data:image/png;base64,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"></image>
<linearGradient x1="74.2546112%" y1="53.3390126%" x2="26.8461194%" y2="50%" id="linearGradient-7">
<stop stop-color="#FEE500" stop-opacity="0.933703016" offset="0%"></stop>
<stop stop-color="#FFFFFF" stop-opacity="0" offset="100%">
</stop>
</linearGradient>
</defs>
<g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="Drawing board" transform="Translate (40.000000, 558.000000)">
<g id="Marshal - 2" transform="Translate (40.000000, 549.000000)">
<g id="Organization">
<g id="Group-7" transform="Translate (30.000000, 255.000000)">
<rect id="Rectangle" stroke="#0025FF" stroke-width="10" x="5" y="5" width="179" height="354"></rect>
<rect id="Rectangle" fill="#0025FF" x="0" y="121" width="189" height="10"></rect>
<g id="Group-4-Copy" transform="Translate (36.000000, 143.000000)">
<rect id="Rectangle" fill="#FFFFFF" x="91" y="Seven" width="13" height="97"></rect>
<rect id="Rectangle-Copy-2" fill="#F3ABAB" x="104" y="11" width="13" height="93"></rect>
<rect id="Rectangle-Copy-3" fill="#F3DFAB" x="117" y="11" width="13" height="93"></rect>
<rect id="Rectangle-Copy-4" fill="#ABD7F3" x="130" y="0" width="13" height="104"></rect>
<rect id="Rectangle" fill="#FFFFFF" x="39" y="30" width="13" height="74"></rect>
<rect id="Rectangle-Copy-2" fill="#F3ABAB" x="52" y="33" width="13" height="71"></rect>
<rect id="Rectangle-Copy-5" fill="#F3ABAB" x="0" y="33" width="13" height="71"></rect>
<rect id="Rectangle-Copy-3" fill="#F3DFAB" x="65" y="33" width="13" height="71"></rect>
<rect id="Rectangle-Copy-6" fill="#F3DFAB" x="13" y="33" width="13" height="71"></rect>
<rect id="Rectangle-Copy-4" fill="#ABD7F3" x="78" y="25" width="13" height="79"></rect>
<rect id="Rectangle-Copy-7" fill="#ABD7F3" x="26" y="25" width="13" height="79"></rect>
</g>
<g id="Group-4-Copy-2" transform="Translate (36.000000, 250.000000)">
<rect id="Rectangle" fill="#FFFFFF" x="91" y="Seven" width="13" height="97"></rect>
<rect id="Rectangle-Copy-2" fill="#F3ABAB" x="104" y="11" width="13" height="93"></rect>
<rect id="Rectangle-Copy-3" fill="#F3DFAB" x="117" y="11" width="13" height="93"></rect>
<rect id="Rectangle-Copy-4" fill="#ABD7F3" x="130" y="0" width="13" height="104"></rect>
<rect id="Rectangle" fill="#FFFFFF" x="39" y="30" width="13" height="74"></rect>
<rect id="Rectangle-Copy-2" fill="#F3ABAB" x="52" y="33" width="13" height="71"></rect>
<rect id="Rectangle-Copy-5" fill="#F3ABAB" x="0" y="33" width="13" height="71"></rect>
<rect id="Rectangle-Copy-3" fill="#F3DFAB" x="65" y="33" width="13" height="71"></rect>
<rect id="Rectangle-Copy-6" fill="#F3DFAB" x="13" y="33" width="13" height="71"></rect>
<rect id="Rectangle-Copy-4" fill="#ABD7F3" x="78" y="25" width="13" height="79"></rect>
<rect id="Rectangle-Copy-7" fill="#ABD7F3" x="26" y="25" width="13" height="79"></rect>
</g>
<rect id="Rectangle-Copy" fill="#0025FF" x="0" y="247" width="189" height="10"></rect>
<g id="Group-4" transform="Translate (75.000000, 17.000000)">
<rect id="Rectangle" fill="#FFFFFF" x="52" y="Seven" width="13" height="97"></rect>
<rect id="Rectangle-Copy-2" fill="#F3ABAB" x="65" y="11" width="13" height="93"></rect>
<rect id="Rectangle-Copy-3" fill="#F3DFAB" x="78" y="11" width="13" height="93"></rect>
<rect id="Rectangle-Copy-4" fill="#ABD7F3" x="91" y="0" width="13" height="104"></rect>
<rect id="Rectangle" fill="#FFFFFF" x="0" y="30" width="13" height="74"></rect>
<rect id="Rectangle-Copy-2" fill="#F3ABAB" x="13" y="33" width="13" height="71"></rect>
<rect id="Rectangle-Copy-3" fill="#F3DFAB" x="26" y="33" width="13" height="71"></rect>
<rect id="Rectangle-Copy-4" fill="#ABD7F3" x="39" y="25" width="13" height="79"></rect>
</g>
</g>
<rect id="Rectangle" stroke="#0025FF" stroke-width="8" fill="url(#pattern-1)" x="4" y="419" width="161" height="203" rx="19"></rect>
<rect id="Rectangle-Copy-4" stroke="#0025FF" stroke-width="8" fill="url(#pattern-3)" x="554" y="419" width="161" height="203" rx="19"></rect>
<rect id="Rectangle-Copy-5" stroke="#0025FF" stroke-width="8" fill="url(#pattern-5)" x="285" y="419" width="161" height="203" rx="19"></rect>
<g id="clock" transform="Translate (69.000000, 81.000000)">
<g id="Marshal - 5" transform="Translate (69.000000, 69.000000) Rotate (31.000000) translate(-69.000000, -69.000000) translate(19.000000, 19.000000)>
<circle id="Oval-2" stroke="#0025FF" stroke-width="6" fill="#FFFFFF" cx="50" cy="50" r="53"></circle>
<circle id="Oval" fill="#0025FF" cx="50" cy="50" r="4"></circle>
<polygon id="Rectangle" fill="#0025FF" points="49.75 1 50.75 1 51.5 49.75 49 49.75">
<animateTransform attributeType="XML" attributeName="transform" begin="0s" dur="60s" type="rotate" from="0 50 fifty" to="360 50 fifty" repeatCount="indefinite" />
</polygon>
</g>
<g id="Organization" transform="Translate (21.000000, 21.000000)" fill="#0025FF">
<rect id="Rectangle" x="47.25" y="0" width="2" height="5.5"></rect>
<rect id="Rectangle" transform="Translate (71.500000, 7.729819) Rotate (30.000000) Translate (-71.500000, -7.729819)" x="70.5" y="6.22981872" width="2" height="3"></rect>
<rect id="Rectangle" transform=Rotate (60.000000) rotate(60.000000) translate(-88.520181, -24.750000)" x="87.5201813" y="23.25" width="2" height="3"></rect>
<rect id="Rectangle" transform="Translate (93.500000, 48.000000) Rotate (90.000000) Translate (-93.500000, -48.000000) x="92.5" y="45.25" width="2" height="5.5"></rect>
<rect id="Rectangle" transform="Translate (88.520181, 71.250000) Rotate (120.000000) Translate (-88.520181, -71.250000)" x="87.5201813" y="69.75" width="2" height="3"></rect>
<rect id="Rectangle" transform="Translate (71.500000, 88.270181) Rotate (150.000000) Translate (-71.500000, -88.270181)" x="70.5" y="86.7701813" width="2" height="3"></rect>
<polygon id="Rectangle" transform="Translate (48.250000, 93.250000) Rotate (180.000000) Translate (-48.250000, -93.250000)" points="47.25 90.5 49.25 90.5 49.25 96 47.25 96"></polygon>
<rect id="Rectangle" transform=Rotate (210.000000) rotate(210.000000) translate(-25.000000, -88.270181)" x="24" y="86.7701813" width="2" height="3"></rect>
<rect id="Rectangle" transform="Translate (7.979819, 71.250000) Rotate (240.000000) Translate (-7.979819, -71.250000)" x="6.97981872" y="69.75" width="2" height="3"></rect>
<polygon id="Rectangle" transform="Translate (3.000000, 48.000000) Rotate (270.000000) Translate (-3.000000, -48.000000) points="2 45.25 4 45.25 4 50.75 2 50.75"></polygon>
<rect id="Rectangle" transform="Translate (7.979819, 24.750000) Rotate (300.000000) Translate (-7.979819, -24.750000)" x="6.97981872" y="23.25" width="2" height="3"></rect>
<rect id="Rectangle" transform="Rotate (330.000000) Translate (-25.000000, -7.729819)" x="24" y="6.22981872" width="2" height="3"></rect>
</g>
<g id="Marshal - 3" transform="Translate (69.000000, 69.000000) Rotate (31.000000) translate(-69.000000, -69.000000) translate(19.000000, 19.000000)>
<g id="Marshal - 2">
<circle id="Oval-2" stroke="#0025FF" stroke-width="6" fill-opacity="0" fill="#FFFFFF" cx="50" cy="50" r="53"></circle>
<circle id="Oval" fill="#0025FF" cx="50" cy="50" r="4"></circle>
</g>
<polygon id="Rectangle" fill="#0025FF" points="49.75 1 50.75 1 51.5 49.75 49 49.75">
<animateTransform attributeType="XML" attributeName="transform" begin="0s" dur="90s" type="rotate" from="0 50 fifty" to="360 50 fifty" repeatCount="indefinite" />
</polygon>
</g>
</g>
<g id="Group-4" transform=Translate (392.000000, 313.000000) scale(-1, 1) Translate (-392.000000, -313.000000) translate(103.000000, 0.000000)>
<path d="M189,506 L110,506 L110,519 L120,519 L120,620 L128,620 L128,519 L168,519 L168,620 L176,620 L176,519 L189,519 L189,506 Z" id="Combined-Shape" stroke="#0025FF" stroke-width="4" fill="#FFFFFF"></path>
<path d="M576,328 L256,328 L256,341 L314,341 L314,620.087891 L322,620.087891 L322,341 L493,341 L493,620.087891 L501,620.087891 L576 L501, 341, 341 L576, 328 Z" id="Combined-Shape-Copy" stroke="#0025FF" stroke-width="4" fill="#FFFFFF"></path>
<path d="M251.33333333, 392c302.364583,400.179687 329.697917,411.1875 333.333333,425.023437 C336.96875,438.859375 316.302083,492.859375 271.333333,587.023437 C306.672686,603.731109 321.339353,613.064443 315.333333,615.023437 C309.327314,616.982432 282.382951,616.982432 234.500247,615.023437 C235.055638,555.690104 239.41613,511.023437 247.581722,481.023437 C255.747314,451.023437 225.220074,439.634115 156,446.855469 L251.333333,392 Z" id="Path-12" stroke="#0025FF" stroke-width="8" fill="#FFFFFF"></path>
<path d="M255.883654,289.265465 L245.037039,289.265465 C214.666518,254.194745 179.234244,240.445107 138.740216,248.016553 C77.9991742,259.373721 33,313.284774 33,374.058594 C33,414.574474 45.6124061,448.826425 70.8372184,476.814448 C92.2433313,494.372405 118.493202,503.151384 149.586831,503.151384 C196.227273,503.151384 242.867716,489.271107 252.087338,492.550513 C261.306961,495.829919 278.364768,501.032905 286.648117,512.260845 C292.17035,519.746139 311.743719,542.894369 345.368224,581.705533 L383.398437,619.728002 L430.171035,619.728002 C431.827889,619.728002 433.171035,618.384856 433.171035,616.728002 C433.171035,615.544245 432.474938,614.471166 431.394009,613.988598 L410.990242,604.87958 L410.990242,604.87958 C376.281076,529.550067 357.480277,489.831092 354.587846,485.722654 C350.249201,479.559997 324.474368,435.988052 316.662828,431.426026 C308.851288,426.864001 258.595307,405.296701 255.883654,405.296701 C253.172,405.296701 254.798992,366.33151 249.918016,351.900428 C246.664031,342.279707 242.62077,329.876716 237.788233,314.691455 L239.541073,311.138765 L255.883654,308.016127 L255.883654,289.265465 Z" id="Path-7" stroke="#0025FF" stroke-width="8" fill="#FFFFFF"></path>
<path d="M439.484971,170 C441.401777,189.910281 442.409913,209.820563 442.509378,229.730844 L442.864289,227.034364 C452.198195,228.265804 457,235.340016 457,246.703125 L457,326 L449,326 L449,246.703125 C449,239.378844 446.914912,235.950173 442.51256,235.079466 L442.517544,233 C442.517544,254 441.506687,275 439.484971,296 L435.484971,296 L435.484971, 170 L439.484971, 170 Z" id="Combined-Shape" fill="#0025FF"></path>
<path d="M166, 348.604837c179.847786,350.066588 189.54948,377.309527 195.105083, 430.333655C200.660685,483.357782 209.759789,522.008027 222.402396,546.284388 C222.402396,551.103223 219.871519,552.307931 214.809766,549.898514 C207.217135,546.284388 206.706105,559.925277 210.757935,559.925277 C214.809766,559.925277 240.444627,567.467064 243.354788,549.898514 C246.264948,532.329964 263.039661,414.716224 258.738555,391.849358 C254.437449,368.982491 246.809022, 301.610608, 215.894427, 280" id="Path-9" stroke="#0025FF" stroke-width="8" fill="#FFFFFF" stroke-linecap="round"></path>
<path d="M256, 372.03125c246.803922,380.347005 236.470588,386.138672 225,389.40625 C213.529412,392.673828 202.179802,395.030599 190.951172, 396.476563," id="Path-10" stroke="#0025FF" stroke-width="8"></path>
<path d="M196.7, 426 C164.9, 463.244792 133485889, 323, 101493933, 594" id="Path-11" stroke="#0025FF" stroke-width="8"></path>
<path d="M279.5, 255c285.851275,255 291,261.491871 291,269.5c291,270.006588 290.979396,270.507108 290.939188,271.000301 L291,271 C310.329966,271 326,283.312169 326, 298.5C326,313.687831 310.329966,326 291,326 C271.670034,326 256,313.687831 256,298.5C256,289.663746 261.304138,281.800873 269.547235,276.769734 C268.563436,274.632334 268,272.149131 268,269.5 C268, 261.491871, 273.148725, 279.5, 255 255 Z" id="Combined-Shape" stroke="#0025FF" stroke-width="8" fill="#FFFFFF"></path>
<circle id="Oval" stroke="#0025FF" stroke-width="4" cx="289" cy="290" r="10"></circle>
<circle id="Oval-Copy" stroke="#0025FF" stroke-width="4" cx="294" cy="314" r="10"></circle>
<path d="M295.25,246.82639 C285.25,244.787328 281.916667,246.521703 285.25,252.029515 C288.583333,257.537328 291.916667,260.291234 295.25,260.291234 L296.25,265.291234 C296.25,265.827692 296.25,266.79514 296.25,268.193578 C296.25,270.291234 292.25,275.109593 296.25,275.109593 C298.916667,275.109593 303.711589,275.109593 310.634766,275.109593 L310.634766,285.052953 C310.634766,287.871963 310.634766,289.281468 310.634766,289.281468 C310.634766,289.281468 319.865234,290.822484 315.25,294.291234 C312.173177,296.603734 310.634766,298.733942 310.634766,300.681859 C307.548828,301.754776 306.777344,303.957901 308.320312,307.291234 C309.863281,310.624567 309.863281,316.527489 308.320313,325 L315.25,327.918919 L335.25,326.549046 C341.705729,324.729239 344.933594,322.657878 344.933594,320.334961 C344.933594,316.850586 349.761719,316.457956 349.761719,309.848581 C349.761719,303.239206 356.558594,296 353.160156,294.291234 C349.761719,292.582468 349.761719,289.162328 349.761719,285.052953 C349.761719,280.943578 356.558594,288.779515 353.160156,279.535375 C349.761719,270.291234 353.25,271.095921 347.25,268.193578 C341.25,265.291234 341.46875,260.291234 338.359375,260.291234 C335.25,260.291234 333.865234,252.029515 322.25,252.029515 C314.50651,252.029515 307.50651,250.29514 301.25,246.82639 L295.25,246.82639 Z" id="Path-14" fill="#0025FF"></path>
<path id="path-rodes" d="M 0 0 L -100 -100"></path>
<path d="M306.157143, 218.14c304.077133,219.580007 302.077153,221.059992 300.157143, 222.58c298.237134,224.100008 296.317153,225.699992 294.397143,227.38 C292.477134,229.060008 290.517153,230.849991 288.517143,232.75 C286.517133,234.65001 284.397154,236.699989 282.157143,238.9 286.837143, 238.15c288.477151,237.969999 290.097135,237.87 291.697143, 237.85c293.297151,237.83 294.837136,237.879999 296.317143,238 C297.797151,238.120001 299.117137,238.299999 300.277143,238.54 L297.517143,243.4 C295.117131,243.199999 293.027152,243.050001 291.247143, 242.95C289.467134,242.85 287.84715,242.82 286.387143, 242.86c284.927136,242.9 283.577149,243.009999 282.337143,243.19 C281.097137,243.370001 279.81715,243.639998 278.497143,244 L275.617143,240.22 C275.137141,239.579997 274.937143,239.070002 275.017143,238.69 C275.097144,238.309998 275.537139,237.860003 276.337143, 237.34c278.657155,235.779992 280.917132,234.150009 283.117143, 232.45c285.317154,230.749992 287.337134,229.090008 289.177143,227.47 C291.017152,225.849992 292.617136,224.310007 293.977143,222.85 C295.33715,221.389993 296.37714,220.120005 297.097143,219.04 C295.457135,219.360002 293.867151,219.609999 292.327143,219.79 C290.787135,219.970001 289.32715,220.08 287.947143,220.12 C286.567136,220.16 285.297149,220.14 284.137143, 220.06c282.977137,219.98 281.997147,219.820001 281.197143,219.58 L283.537143, 214.48c287.377162,215.080003 291.077125,215.34 294.637143,215.26 C298.197161,215.18 301.917124,214.740004 305.797143,213.94 L307.477143,213.94 L306.157143, 218.14 Z" id="Z" fill="#0C2FFF" transform=Translate (291.238572, 228.970000) Scale (-1, 1) Translate (-291.238572, -228.970000)>
<animateMotion dur="1s" repeatCount="indefinite" >
<mpath xlink:href="#path-rodes" />
</animateMotion>
</path>
<path d="M283.644871,184.523353 C282.333405,185.388507 281.072399,186.27768 279.861815,187.190898 C278.65123,188.104116 277.440665,189.065384 276.230081,190.074731 C275.019496,191.084077 273.78371,192.159495 272.522685,193.301018 C271.26166,194.442541 269.924994,195.674165 268.512646,196.995928 C269.445804,196.803672 270.429389,196.653474 271.46343,196.545329 C272.49747,196.437185 273.518885,196.377106 274.527705,196.36509 C275.536525,196.353074 276.5075,196.383113 277.440659,196.45521 C278.373817,196.527306 279.206081,196.635448 279.937476,196.779641 L278.19727,199.699521 C276.68404,199.579361 275.366288,199.489242 274.243976,199.429162 C273.121664,199.369082 272.100249,199.351058 271.1797,199.37509 C270.259152,199.399122 269.407973,199.465209 268.626137,199.573353 C267.844302,199.681498 267.037258,199.843711 266.204982,200.06 L264.389115,197.788982 C264.086469,197.404469 263.960368,197.098065 264.010809,196.86976 C264.06125,196.641456 264.338671,196.371099 264.843081,196.058683 C266.30587,195.121432 267.730807,194.142141 269.117935,193.120778 C270.505062,192.099416 271.778679,191.102101 272.938822,190.128802 C274.098965,189.155504 275.10777,188.230284 275.965267,187.353114 C276.822764,186.475944 277.478487,185.712937 277.932456,185.064072 C276.898415,185.256328 275.895915,185.406526 274.924926,185.514671 C273.953937,185.622815 273.033402,185.688902 272.163295,185.712934 C271.293188,185.736966 270.492449,185.72495 269.761054,185.676886 C269.02966,185.628822 268.411767,185.532695 267.907357,185.388503 L269.382749,182.324431 C271.803917,182.684912 274.136778,182.841118 276.381403,182.793054 C278.626027,182.74499 280.971499,182.480641 283.417887, 182 L284.477143, 182 L283.644871, 184.523353 Z" id="Z-Copy" fill="#0C2FFF" transform=Translate (274.238572, 191.030000) Scale (-1, 1) Translate (-274.238572, -191.030000)>
<animateMotion dur="1s" repeatCount="indefinite" begin=".6s">
<mpath xlink:href="#path-rodes" />
</animateMotion>
</path>
<path d="M224.05131, 192.265868c223.380298,192.699882 222.735103,193.145946 222.115707,193.604072 C221.496311,194.062198 220.876924,194.544429 220.257528,195.050778 C219.638132,195.557128 219.005842,196.096624 218.360637,196.669281 C217.715433,197.241939 217.031527,197.859797 216.308898,198.522874 C216.786349,198.426427 217.289601,198.351078 217.818668,198.296826 C218.347736,198.242575 218.870344,198.212435 219.386507,198.206407 C219.90267,198.200379 220.39947,198.215449 220.876921,198.251617 C221.354373,198.287785 221.780201,198.342036 222.154419,198.414371 L221.264042,199.879162 C220.489797,199.818882 219.815569,199.773673 219.241337,199.743533 C218.667105,199.713393 218.144497,199.704351 217.673498,199.716407 C217.202499,199.728463 216.766993,199.761616 216.366966,199.815868 C215.96694,199.87012 215.554015,199.951496 215.12818,200.06 L214.199091,198.920719 C214.044242,198.727823 213.979722,198.574112 214.00553,198.459581 C214.031339,198.345049 214.173281,198.209422 214.431363,198.052695 C215.1798,197.582513 215.90887,197.09124 216.618595,196.578862 C217.328319,196.066484 217.979966,195.56617 218.573554,195.077904 C219.167142,194.589638 219.683297,194.125491 220.122036,193.685449 C220.560775,193.245407 220.896276,192.862636 221.12855,192.537126 C220.599482,192.633573 220.086553,192.708922 219.589745,192.763174 C219.092938,192.817425 218.621946,192.850579 218.176755,192.862635 C217.731564,192.874691 217.321866,192.868663 216.947647 192.844551 C216.573429 192.820439 216.257283 192.772216 215.999202 192.69988 L216.754087 191.162754 C217.992879,191.343594 219.186489,191.421956 220.334952,191.397844 C221.483416,191.373732 222.683478,191.241119 223.935174, 191 L224.477143, 191 L224.05131, 192.265868 Z" id="Z-Copy-2" fill="#0C2FFF" transform=Translate (219.238572, 195.530000) Scale (-1, 1) Translate (-219.238572, -195.530000)>
<animateMotion dur="1.5 s" repeatCount="indefinite" begin="1s">
<mpath xlink:href="#path-rodes" />
</animateMotion>
</path>
<path d="M196.010666,165.405589 C195.275609,165.887507 194.568833,166.382805 193.890318,166.891497 C193.211803,167.400189 192.533298,167.935646 191.854784,168.497884 C191.176269,169.060123 190.483628,169.659165 189.776842,170.29503 C189.070056,170.930895 188.320874,171.616949 187.529273,172.353214 C188.052295,172.246121 188.60358,172.162455 189.183145,172.102216 C189.762709,172.041976 190.335198,172.00851 190.900627,172.001816 C191.466056,171.995123 192.010273,172.011856 192.533295,172.052016 C193.056317,172.092176 193.522789,172.152415 193.932725,172.232735 L192.957365,173.859202 C192.109221,173.792268 191.370641,173.742069 190.741601,173.708603 C190.112561,173.675136 189.540072,173.665096 189.024118,173.678483 C188.508164,173.69187 188.031091,173.728682 187.592883,173.788922 C187.154676,173.849162 186.702339,173.93952 186.23586,174.06 L185.218093,172.79497 C185.048464,172.580784 184.977787,172.410107 185.006058,172.282934 C185.03433,172.155761 185.18982,172.005164 185.472535,171.831138 C186.292407,171.309059 187.091064,170.763562 187.868529,170.194631 C188.645994,169.625699 189.359837,169.070162 190.01008,168.528004 C190.660324,167.985846 191.225744,167.470468 191.706359,166.981856 C192.186974,166.493244 192.554497,166.068225 192.80894,165.706786 C192.229376,165.813879 191.667489,165.897545 191.123263,165.957784 C190.579038,166.018024 190.063092,166.054837 189.575409,166.068224 188.228988,166.048144 C187.819052,166.02137 187.472732,165.967825 187.190017,165.887505 L188.016953,164.180719 C193.197677,164.414983 194.51228,164.267733 C193.197677,164.414983 194.51228,164.267733 195.883446, 164 L196.477143, 164 L196.010666, 165.405589 Z" id="Z-Copy-3" fill="#0C2FFF" transform=Translate (190.738572, 169.030000) Scale (-1, 1) Translate (-190.738572, -169.030000)>
<animateMotion dur="1s" repeatCount="indefinite" begin="1.4 s">
<mpath xlink:href="#path-rodes" />
</animateMotion>
</path>
<polygon id="Path-16" fill="url(#linearGradient-7)" points="435.484971 171.270181 436 296 10.9825715 626 0 0">
<animate attributeType="XML" calcMode="discrete" attributeName="opacity" begin="0" dur="2s" values="0; . 2; 0; . 3; 0; . 1; 0; . 4; 0" repeatCount="indefinite" />
<animate attributeType="XML" attributeName="opacity" begin="2s" dur="3s" values=". 4; . 6; 0" repeatCount="indefinite" />
</polygon>
</g>
</g>
</g>
</g>
</g>
<style type="text/css"> <! [CDATA[#Z,#Z-Copy,#Z-Copy-2,#Z-Copy-3{
animation: show 3s infinite;
}
@keyframes show{
0%{
opacity:0;
}
30%{
opacity:1;
}
80%{
opacity:1;
}
100%{
opacity:0;
}
}
]]>
</style>
</svg>
Copy the codeThese are the animations I added to this SVG. Then it will implement the GIF effect in the introduction page. Today is here, mainly introduced SVG extraction and CSS3 animation combination, we look at the effect
