gsap实现坦克开炮动画效果代码-html代码-BFW代码库

gsap实现坦克开炮动画效果代码

代码语言：html

所属分类：动画

代码描述：gsap实现坦克开炮动画效果代码

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开


<!DOCTYPE html>
<html lang="en" >

<head>

  <meta charset="UTF-8">

  
  
  
<style>
body,
html {
  margin: 0;
  padding: 0;
  background: #d7edee;
  width: 100%;
  height: 100vh;
  overflow: hidden;
}

.box {
  position: fixed;
  left: calc(50vw - 50vmin);
  top: calc(50vh - 37.5vmin);
  width: 100vmin;
  height: 75vmin;
}

svg {
  overflow: visible;
  transform: scale(150%);
}

#tank {
  cursor: pointer;
}
</style>


</head>

<body>
  <div class="box">
  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 801 600.5">
    <defs>
      <clipPath id="clip-path">
        <path d="M414.3 243.6s21 33.6-1.2 43.2c-14.7 6.4-23-4.4-23-24 0-12.9 2.3-12.9 4.6-17.7s19.6-1.5 19.6-1.5z" class="cls-1" />
      </clipPath>
      <clipPath id="clip-path-2">
        <path d="M396.6 220.8c10 0 18 6.8 18 15s-3 15-18 15-18.1-6.7-18.1-15 8.1-15 18-15z" class="cls-1" />
      </clipPath>
      <clipPath id="clip-path-3">
        <circle cx="400" cy="288.6" r="28.5" class="cls-1" />
      </clipPath>
      <clipPath id="clip-path-4">
        <path d="M360.3 269.8h80.3a5.5 5.5 0 015.5 5.5v40.5h-91.3v-40.5a5.5 5.5 0 015.5-5.5z" class="cls-1" />
      </clipPath>
      <clipPath id="clip-path-5">
        <path d="M374.8 250.5h51.3a5.5 5.5 0 015.5 5.5v13.8h-62.3V256a5.5 5.5 0 015.5-5.5z" class="cls-1" />
      </clipPath>
      <style>
        .cls-1,
        .cls-13 {
          fill: none
        }

        .cls-12 {
          fill: #d7edee
        }

        .cls-10,
        .cls-3,
        .cls-8 {
          fill: #fff
        }

        .cls-3,
        .cls-8 {
          stroke: #98aebe
        }

        .cls-13,
        .cls-3,
        .cls-8 {
          stroke-linejoin: round
        }

        .cls-3 {
          stroke-width: .82px
        }

        .cls-13 {
          stroke-linecap: round
        }

       .........完整代码请登录后点击上方下载按钮下载查看