gsap徽章动画效果-html代码-BFW代码库

代码语言：html
所属分类：动画
下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">

<style>
#restartButton {
  position: absolute;
  top: 80vh;
  font-size: 2.5vh;
  border: 1vh solid #6b226a;
  background: #47174b;
  border-radius: 3vh;
  padding: 2vh 5vh;
  color: #FFF;
  text-transform: uppercase;
  font-weight: bold;
  cursor: pointer;
}

html, body {
  overflow: hidden;
}

body {
  width: 100vw;
  height: 100vh;
  -webkit-perspective: 600px;
          perspective: 600px;
  display: -webkit-box;
  display: flex;
  -webkit-box-align: center;
          align-items: center;
  -webkit-box-pack: center;
          justify-content: center;
  background: #231324;
}
</style>

</head>
<body translate="no">
<button id="restartButton" type="button" onclick="master.restart()">restart</button>
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="100vw" height="100vh" viewBox="0 0 900 650" style="enable-background:new 0 0 900 650;" xml:space="preserve">
// VIEWBOX HOLDER
<rect x="0.5" y="0.5" style="fill:none;stroke:none;stroke-miterlimit:10;" width="900" height="650" />
// WHOLE SVG
<g id="wholeGroup">
// BANNER GROUP
<g id="bannerGroup">
// LEFT BANNER
<g id="leftBanner">
<polygon style="fill:#4E194F;" points="356.725,490.19 286.718,466.698 216.71,483.19 216.71,191 356.725,191" />
<polygon style="fill:#3D123E;" points="216.71,481.19 216.71,492 286.718,475.507 356.725,499 356.725,488.19 286.718,464.698" />
<rect x="216.72" y="213.695" style="fill:#3D123E;" width="140" height="12.48" />
<path style="fill:#FAF20A;" d="M214.165,214h-13.695c-1.842,0-3.335-1.252-3.335-2.796V190.87c0-1.544,1.493-2.796,3.335-2.796
                        h13.695c1.842,0,3.335,1.252,3.335,2.796v20.334C217.5,212.748,216.007,214,214.165,214z" />
</g>
// RIGHT BANNER
<g id="rightBanner">
<polygon style="fill:#4E194F;" points="543.71,490.19 613.718,466.698 683.725,483.19 683.725,191 543.71,191" />
<polygon style="fill:#3D123E;" points="683.725,481.19 683.725,492 613.718,475.507 543.71,499 543.71,488.19 613.718,464.698" />
<rect x="543.715" y="213.695" style="fill:#3D123E;" width="140" height="12.48" />
<path style="fill:#FAF20A;" d="M700.165,214h-13.695c-1.842,0-3.335-1.252-3.335-2.796V190.87c0-1.544,1.493-2.796,3.335-2.796
                        h13.695c1.842,0,3.335,1.252,3.335,2.796v20.334C703.5,212.748,702.007,214,700.165,214z" />
</g>
</g>
// TRUMPET GROUP
<g id=trumpetGroup>
// LEFT TRUMPET
<g id="leftTrumpet">
<rect x="296.968" y="238.845" transform="matrix(0.3462 -0.9381 0.9381 0.3462 -53.3528 460.1289)" style="fill:#A7AC0C;" width="13" height="59" />
<rect x="290.927" y="258.877" transform="matrix(0.3462 -0.9381 0.9381 0.3462 -36.6387 481.1774)" style="fill:#A7AC0C;" width="72" height="16" />
<rect x="317.365" y="272.816" transform="matrix(0.3462 -0.9381 0.9381 0.3462 -36.3538 509.4638)" style="fill:#A7AC0C;" width="60" height="16" />
<rect x="315.583" y="235.424" transform="matrix(0.3462 -0.9381 0.9381 0.3462 -8.9769 473.9652)" style="fill:#63610D;" width="40" height="16" />
<path style="fill:#FFFF13;" d="M345.49,235.355l-12.196-4.501c-8.149-2.385-3.942-13.804,3.809-10.319
            c-0.001,0,12.195,4.501,12.195,4.501C357.448,227.42,353.24,238.839,345.49,235.355z" />
<path style="fill:#FFFF19;" d="M369.703,254.95c-29.721-16.88-148.905-41.744-171.223-87.705
            c-8.581-18.628-14.373,4.284-14.373,4.284c-4.18,11.339-9.664,26.175-13.85,37.526c0,0-10.482,21.181,8.142,12.598
            c46.355-20.579,154.206,38.288,187.149,44.555L369.703,254.95z" />
<path style="fill:#FFFF19;" d="M391.161,341.216c0,0-95.691-35.317-95.691-35.317c-23.199-8.562-34.134-28.816-26.591-49.254
                c7.543-20.438,29.014-28.731,52.213-20.169l95.691,35.317C469.28,289.718,442.75,361.707,391.161,341.216z M316.591,248.672
                c-37.038-13.244-53.353,31.046-16.621,45.03c0.002,0,95.692,35.317,95.692,35.317c20.081,7.411,31.683-2.088,35.516-12.474
                c3.833-10.386,1.184-25.145-18.896-32.557L316.591,248.672z" />
</g>
// RIGHT TRUMPET
<g id="rightTrumpet">
<rect x="567.089" y="261.845" transform="matrix(0.9381 -0.3462 0.3462 0.9381 -56.0106 223.1639)" style="fill:#A7AC0C;" width="59" height="13" />
<rect x="565.13" y="230.877" transform="matrix(0.9381 -0.3462 0.3462 0.9381 -56.9534 214.9504)" style="fill:#A7AC0C;" width="16" height="72" />
<rect x="544.692" y="250.816" transform="matrix(0.9381 -0.3462 0.3462 0.9381 -63.0438 208.7361)" style="fill:#A7AC0C;" width="16" height="60" />
<rect x="556.473" y="223.424" transform="matrix(0.9381 -0.3462 0.3462 0.9381 -49.3681 210.5025)" style="fill:#63610D;" width="16" height="40" />
<path style="fill:#FFFF13;" d="M554.567,235.355l14.072-5.194c2.332-0.861,3.524-3.448,2.664-5.78
            c-3.217-9.233-16.838,0.129-22.421,1.346C542.018,228.785,548.674,238.115,554.567,235.355z" />
<path style="fill:#FFFF19;" d="M530.354,254.95c29.721-16.88,148.905-41.744,171.223-87.705
            c8.581-18.628,14.373,4.284,14.373,4.284c4.18,11.339,9.664,26.175,13.85,37.526c0,0,10.482,21.181-8.142,12.598
            c-46.355-20.579-154.206,38.288-187.149,44.555L530.354,254.95z" />
<path style="fill:#FFFF19;" d="M456.683,321.047c-7.543-20.438,3.392-40.691,26.591-49.254l95.691-35.317
            c23.199-8.562,44.67-0.269,52.213,20.169s-3.392,40.691-26.591,49.254l-95.691,35.317
            C485.696,349.778,464.226,341.484,456.683,321.047z M487.775,283.989c-36.762,13.993-20.391,58.263,16.618,45.032
            c0.001-0.001,95.692-35.318,95.692-35.318c20.081-7.411,22.73-22.17,18.896-32.557c-3.833-10.386-15.435-19.886-35.516-12.474
            L487.775,283.989z" />
</g>
</g>
// MIDDLE BANER
<g id="middleBanner">
<polygon style="fill:#74016B;" points="554.039,524 450.028,492 346.018,524 346.018,126 554.039,126" />
<polygon style="fill:#590056;" points="346.018,522 346.018,536 450.028,504 554.039,536 554.039,522 450.028,490" />
<rect x="346.028" y="161" style="fill:#590056;" width="208" height="17" />
<path style="fill:#FAF20A;" d="M342.107,164H323.95c-2.442,0-4.422-1.98-4.422-4.422v-32.157c0-2.442,1.98-4.422,4.422-4.422
                h18.157c2.442,0,4.422,1.98,4.422,4.422v32.157C346.528,162.02,344.549,164,342.107,164z" />
<path style="fill:#FAF20A;" d="M576.107,164H557.95c-2.442,0-4.422-1.98-4.422-4.422v-32.157c0-2.442,1.98-4.422,4.422-4.422
                h18.157c2.442,0,4.422,1.98,4.422,4.422v32.157C580.528,162.02,578.549,164,576.107,164z" />
</g>
// STARS
<g id="starGroup">
// TOP STAR
<polygon id="topStar" style="fill:#FFFFFF;" points="451.028,113 457.831,137.197 482.028,144 457.831,150.803 451.028,175 444.225,150.803 
            420.028,144 444.225,137.197" />
// LEFT STAR
<polygon id="leftStar" style="fill:#FFFFFF;" points="290.028,345 296.831,369.197 321.028,376 296.831,382.803 290.028,407 283.225,382.803 
                259.028,376 283.225,369.197" />
// RIGHT STAR
<polygon id="rightStar" style="fill:#FFFFFF;" points="610.028,345 616.831,369.197 641.028,376 616.831,382.803 610.028,407 603.225,382.803 
                579.028,376 603.225,369.197" />
</g>
// SHIELD
<g id="shield">
<path style="fill:#9D5826;" d="M449.837,466c25-2,84-47,98-59s16-22,13-36s-2-34-2-52s11-49-4-64c-19.5-19.5-80-52-105-52h0.382
                h-0.382h0.382c-25,0-85.5,32.5-105,52c-15,15-4,46-4,64s1,38-2,52s-1,24,13,36s73,57,98,59H449.837z" />
<path style="fill:#7E3A17;" d="M449.853,455c22.909-1.833,76.973-43.068,89.802-54.065c12.829-10.996,14.662-20.16,11.913-32.989
                c-2.749-12.829-1.833-31.156-1.833-47.65s10.08-44.901-3.665-58.646C528.201,243.781,472.762,214,449.853,214h0.35h-0.35h0.35
                c-22.909,0-78.348,29.781-96.217,47.65c-13.745,13.745-3.665,42.........完整代码请登录后点击上方下载按钮下载查看