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.152-3.665,58.646s0.916,34.821-1.833,47.65
		c-2.749,12.829-0.916,21.992,11.913,32.989c12.829,10.996,66.894,52.232,89.802,54.065H449.853z" />
<path style="fill:#4A170A;" d="M449.871,443c20.627-1.65,69.308-38.779,80.859-48.681c11.551-9.901,13.202-18.152,10.726-29.703
		s-1.65-28.053-1.65-42.905s9.076-40.43-3.3-52.806C520.416,252.816,470.498,226,449.871,226h0.315h-0.315h0.315
		c-20.627,0-70.546,26.816-86.635,42.905c-12.376,12.376-3.3,37.954-3.3,52.806s0.825,31.354-1.65,42.905
		s-0.825,19.802,10.726,29.703c11.551,9.901,60.232,47.03,80.859,48.681H449.871z" />
<path style="fill:#370C06;" d="M499.036,331.462L525.283,286h-52.495l-22.665-39.257L427.458,286h-52.495l26.248,45.462
    	l-26.248,45.462h52.495l22.665,39.256l22.665-39.256h52.495L499.036,331.462z M507.963,296l-14.701,25.462L478.562,296H507.963z
		 M487.489,331.462l-20.474,35.462h-33.782l-20.474-35.462L433.232,296h33.783L487.489,331.462z M450.123,266.743L461.241,286
		h-22.236L450.123,266.743z M392.283,296h29.401l-14.701,25.462L392.283,296z M392.283,366.925l14.701-25.463l14.701,25.463
		H392.283z M450.123,396.181l-11.118-19.256h22.235L450.123,396.181z M493.262,341.462l14.701,25.463h-29.402L493.262,341.462z" />
</g>
// SWORD GROUP
<g id="swordGroup">
// LEFT SWORD
<g id="leftSword">
<path style="fill:#FFFFFF;" d="M432.893,344.932c0,0,70.711-70.711,82.024-82.024c11.314-11.314,21.213-1.414,21.213-1.414
    		l10.607-51.619l-51.619,10.607c0,0,9.899,9.9-1.414,21.213c-30.983,26.068-84.437,96.974-111.723,98.995l-23.335,26.163
			c7.755,7.755,23.36,23.36,31.113,31.113l26.163-23.335C413.801,364.023,432.893,344.932,432.893,344.932z" />
<path style="fill:#FEF10D;" d="M418.044,410.693c-9.192,0-7.071,2.828-16.263-4.95c-9.161-7.751-26.87-24.042-26.87-24.042
			s-16.29-17.709-24.042-26.87c-7.778-9.192-4.95-7.071-4.95-16.263l-23.335-0.707l0.707,23.335c9.192,0,7.071-2.828,16.263,4.95
			c9.161,7.751,26.87,24.042,26.87,24.042s16.29,17.709,24.042,26.87c7.778,9.192,4.95,7.071,4.95,16.263l23.335,0.707
			L418.044,410.693z" />
<polygon style="fill:#F8B40E;" points="332.484,443.927 312.685,424.128 357.94,381.701 374.91,398.672 			" />
<path style="fill:#DECE07;" d="M359.504,364.701h-10.786v9.448c21.823,19.721,14.008,11.904,33.718,33.715h9.445v-10.783
			C370.75,377.958,378.639,385.845,359.504,364.701z" />
<rect x="355.082" y="371.065" style="fill:#FFF10D;" width="29.021" height="29.021" />
<rect x="363.567" y="379.55" style="fill:#822682;" width="12.05" height="12.05" />
<path style="fill:#FEF10D;" d="M338.141,446.755c-11.482-11.48-16.804-16.805-28.284-28.284c-2.828-2.828-3.536-3.536-4.95,0
			c-1.414,3.536-3.536,8.485-2.121,12.728c2.88,4.84,2.065,17.563,2.121,20.506c3.041,0.07,15.596-0.777,20.506,2.122
			c4.243,1.414,9.193-0.708,12.728-2.122C341.676,450.29,340.969,449.583,338.141,446.755z" />
</g>
// RIGHT SWORD
<g id="rightSword">
<path style="fill:#FFFFFF;" d="M467.163,344.932c0,0-70.711-70.711-82.024-82.024c-11.314-11.314-21.213-1.414-21.213-1.414
			l-10.607-51.619l51.619,10.607c0,0-9.9,9.9,1.414,21.213c30.983,26.068,84.437,96.974,111.723,98.995l23.335,26.163
			c-7.755,7.755-23.36,23.36-31.113,31.113l-26.163-23.335C486.255,364.023,467.163,344.932,467.163,344.932z" />
<path style="fill:#FEF10D;" d="M482.013,410.693c9.192,0,7.071,2.828,16.263-4.95c9.161-7.751,26.87-24.042,26.87-24.042
			s16.29-17.709,24.042-26.87c7.778-9.192,4.95-7.071,4.95-16.263l23.335-0.707l-0.707,23.335c-9.192,0-7.071-2.828-16.263,4.95
			c-9.161,7.751-26.87,24.042-26.87,24.042s-16.29,17.709-24.042,26.87c-7.778,9.192-4.95,7.071-4.95,16.263l-23.335,0.707
			L482.013,410.693z" />
<polygon style="fill:#F8B40E;" points="567.573,443.927 587.372,424.128 542.117,381.701 525.146,398.672 			" />
<path style="fill:#DECE07;" d="M540.553,364.701h10.786v9.448c-21.823,19.721-14.008,11.904-33.718,33.715h-9.445v-10.783
			C529.307,377.958,521.418,385.845,540.553,364.701z" />
<rect x="515.954" y="371.065" style="fill:#FFF10D;" width="29.021" height="29.021" />
<rect x="524.439" y="379.55" style="fill:#822682;" width="12.05" height="12.05" />
<path style="fill:#FEF10D;" d="M561.916,4.........完整代码请登录后点击上方下载按钮下载查看