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
        }

        .cls-12,
        .cls-14,
        .cls-5 {
          fill-rule: evenodd
        }

        .cls-5,
        .cls-9 {
          fill: #98aebe
        }

        .cls-14,
        .cls-7 {
          fill: #556f80
        }

        .cls-13 {
          stroke: #556f80;
          stroke-width: .84px
        }
      </style>
    </defs>
    <g id="Layer_2" data-name="Layer 2">
      <g id="Layer_1-2" data-name="Layer 1">
        <path fill="#d7edee" d="M0 0h800v600H0z" />
        <g id="tank">
          <path id="tank-back-rect" d="M438.5 278.4h14a3.7 3.7 0 013.8 3.7v22.6a3.7 3.7 0 01-3.7 3.7h-14.1v-30z" class="cls-3" />
          <g id="door">
            <circle cx="415" cy="232.7" r="17.8" class="cls-3" />
            <path fill="#fff" fill-rule="evenodd" stroke="#98aebe" stroke-linecap="round" stroke-linejoin="round" stroke-width=".8" d="M406.7 230.7v-4h16.6v4" />
          </g>
          <path id="body" d="M405.8 242.3c5.3.3 8.3 0 12.1 8.2 4.9 10.4 11 29.4-4.7 36.3-14.8 6.4-23.2-4.4-23.2-24 0-10.2 1-13.4 4.7-17.7 2.2-2.6 6.9-3 11.1-2.8z" class="cls-5" />
          <g clip-path="url(#clip-path)">
            <ellipse cx="422.2" cy="2.........完整代码请登录后点击上方下载按钮下载查看