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

gsap徽章动画效果

代码语言：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
.........完整代码请登录后点击上方下载按钮下载查看