<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<title>html5 svg绘制2020新年快乐主题动画特效</title>
<link rel='stylesheet' href='css/bootstrap.min.css'>
<link rel="stylesheet" href="css/css.css">
</head>
<body>
<div class="container nav_container mt-5">
<div class="col-sm-12 col-md-12 mauto">
<svg width="100%" height="100%" viewBox="0 0 750 500" fill="none" xmlns="http://www.w3.org/2000/svg">
<g id="newyear2020">
<path id="Vector" d="M750 0H0V500H750V0Z" fill="#1C2033"/>
<path id="Vector_2" d="M375 27.7H723.7V472.3H375" stroke="#E27C6C" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
<path id="Vector_3" d="M375 37.3H697.2C697.2 46.5 704.7 54 713.9 54V446C704.7 446 697.2 453.5 697.2 462.7H375" stroke="#EFC87E" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
<path id="Vector_4" d="M737.2 14.2H723.7V27.7H737.2V14.2Z" stroke="#E27C6C" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
<path id="Vector_5" d="M737.2 472.3H723.7V485.8H737.2V472.3Z" stroke="#E27C6C" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
<g id="Group">
<path id="Vector_6" d="M625.7 305.5L588.1 370.7H663.4L625.7 305.5Z" stroke="#EFC87E" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
<path id="Vector_7" d="M625.7 330.6L581.6 407.1H669.9L625.7 330.6Z" stroke="#EFC87E" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
<path id="Vector_8" d="M625.7 344.9L570.4 440.7H681.1L625.7 344.9Z" stroke="#EFC87E" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
<path id="Vector_9" d="M634 440.7H617.5V462.7H634V440.7Z" stroke="#EFC87E" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
</g>
<g id="Group_2">
<path id="Vector_10" d="M458.1 356.2L432.6 400.4H483.7L458.1 356.2Z" stroke="#EFC87E" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
<path id="Vector_11" d="M458.1 373.2L428.2 425H488.1L458.1 373.2Z" stroke="#EFC87E" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
<path id="Vector_12" d="M458.1 382.9L420.6 447.8H495.6L458.1 382.9Z" stroke="#EFC87E" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
<path id="Vector_13" d="M458.1 377.9L442.2 405.6H474.1L458.1 377.9Z" stroke="#E27C6C" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
<path id="Vector_14" d="M441.4 411.9L420.6 447.8H462.1L441.4 411.9Z" stroke="#E27C6C" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
<path id="Vector_15" d="M474.9 411.9L454.2 447.8H495.6L474.9 411.9Z" stroke="#E27C6C" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
<path id="Vector_16" d="M463.7 447.8H452.5V462.7H463.7V447.8Z" stroke="#EFC87E" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
</g>
<path id="Vector_17" d="M625.7 379.9L612.7 402.4H638.7L625.7 379.9Z" stroke="#E27C6C" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
<path id="Vector_18" d="M625.7 344.9L634.3 330H617.2L625.7 344.9Z" stroke="#E27C6C" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
<path id="Vector_19" d="M625.7 411.9L612.7 434.4H638.7L625.7 411.9Z" stroke="#EFC87E" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
<path id="Vector_20" d="M670.6 440.7L651.2 407.1L630.2 370.7L625.7 363L621.3 370.7L600.3 407.1L580.9 440.7" stroke="#EFC87E" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
<path id="Vector_21" d="M634 458.9H617.5" stroke="#EFC87E" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
<path id="Vector_22" d="M625.7 420.3L620 430.3H631.5L625.7 420.3Z" fill="#EFC87E"/>
<g id="jhalar6">
<path id="Vector_23" d="M636.8 37.3V182.6" stroke="#EFC87E" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
<path id="Vector_24" d="M673.167 218.89L636.822 182.545L600.477 218.89L636.822 255.235L673.167 218.89Z" stroke="#EFC87E" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
<path id="Vector_25" d="M651.4 244.6H622.2C616.1 244.6 611.1 239.6 611.1 233.5V204.3C611.1 198.2 616.1 193.2 622.2 193.2H651.4C657.5 193.2 662.5 198.2 662.5 204.3V233.5C662.5 239.7 657.6 244.6 651.4 244.6Z" stroke="#E27C6C" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
<path id="Vector_26" d="M636.8 230C642.93 230 647.9 225.03 647.9 218.9C647.9 212.77 642.93 207.8 636.8 207.8C630.67 207.8 625.7 212.77 625.7 218.9C625.7 225.03 630.67 230 636.8 230Z" stroke="#E27C6C" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
<path id="Vector_27" d="M642 218.9C642 221.8 639.7 224.1 636.8 224.1C633.9 224.1 631.6 221.8 631.6 218.9C631.6 216 633.9 213.7 636.8 213.7C639.7 213.7 642 216.1 642 218.9Z" fill="#EFC87E"/>
<path id="Vector_28" d="M636.8 167.2C639.451 167.2 641.6 165.051 641.6 162.4C641.6 159.749 639.451 157.6 636.8 157.6C634.149 157.6 632 159.749 632 162.4C632 165.051 634.149 167.2 636.8 167.2Z" stroke="#E27C6C" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
<path id="Vector_29" d="M640.2 145.8C640.2 147.7 638.7 149.2 636.8 149.2C634.9 149.2 633.4 147.7 633.4 145.8C633.4 143.9 634.9 142.4 636.8 142.4C638.7 142.4 640.2 143.9 640.2 145.8Z" stroke="#E27C6C" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
<path id="Vector_30" d="M659.5 218.9C659.5 220.9 651.8 221.7 651.2 223.6C650.6 225.5 656.3 230.7 655.1 232.3C653.9 233.9 647.3 230.1 645.7 231.2C644.1 232.4 645.7 239.9 643.8 240.5C642 241.1 638.8 234.1 636.8 234.1C634.8 234.1 631.6 241.1 629.8 240.5C627.9 239.9 629.5 232.3 627.9 231.2C626.3 230 619.6 233.9 618.5 232.3C617.3 230.7 623.1 225.6 622.4 223.6C621.8 221.8 614.1 221 614.1 218.9C614.1 216.9 621.8 216.1 622.4 214.2C623 212.3 617.3 207.1 618.5 205.5C619.7 203.9 626.3 207.7 627.9 206.6C629.5 205.4 627.9 197.9 629.8 197.3C631.6 196.7 634.8 203.7 636.8 203.7C638.8 203.7 642 196.7 643.8 197.3C645.7 197.9 644.1 205.5 645.7 206.6C647.3 207.8 654 203.9 655.1 205.5C656.3 207.1 650.5 212.2 651.2 214.2C651.8 216.1 659.5 216.9 659.5 218.9Z" stroke="#EFC87E" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
</g>
<g id="jhalar5">
<path id="Vector_31" d="M552.5 176.9C570.339 176.9 584.8 162.439 584.8 144.6C584.8 126.761 570.339 112.3 552.5 112.3C534.661 112.3 520.2 126.761 520.2 144.6C520.2 162.439 534.661 176.9 552.5 176.9Z" stroke="#EFC87E" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
<path id="Vector_32" d="M552.5 162.8C562.552 162.8 570.7 154.652 570.7 144.6C570.7 134.548 562.552 126.4 552.5 126.4C542.448 126.4 534.3 134.548 534.3 144.6C534.3 154.652 542.448 162.8 552.5 162.8Z" stroke="#EFC87E" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
<path id="Vector_33" d="M552.5 153.9C557.636 153.9 561.8 149.736 561.8 144.6C561.8 139.464 557.636 135.3 552.5 135.3C547.364 135.3 543.2 139.464 543.2 144.6C543.2 149.736 547.364 153.9 552.5 153.9Z" stroke="#EFC87E" stroke-miterlimit="10"/>
<path id="Vector_34" d="M552.5 148.4C554.599 148.4 556.3 146.699 556.3 144.6C556.3 142.501 554.599 140.8 552.5 140.8C550.401 140.8 548.7 142.501 548.7 144.6C548.7 146.699 550.401 148.4 552.5 148.4Z" fill="#EFC87E"/>
<path id="Vector_35" d="M588 144.6C588 147.8 576 149 575.1 151.9C574.1 154.9 583.1 162.9 581.3 165.4C579.5 167.9 569 161.9 566.5 163.7C564 165.5 566.5 177.3 563.5 178.3C560.6 179.2 555.7 168.3 552.5 168.3C549.3 168.3 544.4 179.3 541.5 178.3C538.5 177.3 541 165.5 538.5 163.7C536 161.9 525.6 167.9 523.7 165.4C522 163 531 154.9 530 152C529.1 149.1 517.1 147.9 517.1 144.7C517.1 141.5 529.1 140.3 530 137.4C531 134.4 522 126.4 523.8 123.9C525.6 121.4 536.1 127.4 538.6 125.6C541
