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="251.6" class="cls-7" rx="11.8" ry="3.7" />
<ellipse cx="423.6" cy="261.3" class="cls-7" rx="11.8" ry="3.7" />
<ellipse cx="425.4" cy="270.3" class="cls-7" rx="11.8" ry="3.7" />
</g>
<g id="tires-group">
<rect width="109.1" height="26.5" x="315.2" y="329.5" class="cls-8" rx="10.1" transform="rotate(-180 369.8 342.8)" />
<rect width="105.5" height="26.5" x="327.6" y="329.5" class="cls-8" rx="10.1" transform="rotate(-180 380.4 342.8)" />
<rect width="90.9" height="17.6" x="334.9" y="334" class="cls-9" rx="6.7" transform="rotate(180 380.4 342.8)" />
<g id="tires-back" class='tires'>
<circle cx="344.7" cy="342.8" r="5.5" class="cls-10" />
<path d="M341.8 341.8a2.7 2.7 0 01.4-1.6.3.3 0 01.5-.1 3 3 0 01.6.5 3.9 3.9 0 011.4-.3 4 4 0 011.2.2 4.6 4.6 0 01.4-.5.3.3 0 01.5 0 2.8 2.8 0 01.7 1.6 2.3 2.3 0 01.4 1.3c0 1.5-.5 2.7-3.2 2.7s-3.2-1.2-3.2-2.7a2.3 2.3 0 01.3-1z" class="cls-5" />
<circle cx="358.8" cy="342.8" r="5.5" class="cls-10" />
<path d="M356 341.8a2.7 2.7 0 01.3-1.6.3.3 0 01.5-.1 3 3 0 01.6.5 3.9 3.9 0 011.4-.3 4 4 0 011.2.2 3.7 3.7 0 01.5-.5.3.3 0 01.5 0 2.8 2.8 0 01.6 1.6 2.4 2.4 0 01.5 1.3c0 1.5-.6 2.7-3.3 2.7s-3.2-1.2-3.2-2.7a2.3 2.3 0 01.3-1z" class="cls-5" />
<circle cx="373" cy="342.8" r="5.5" class="cls-10" />
<path d="M370 341.8a2.7 2.7 0 01.5-1.6.3.3 0 01.4-.1 3 3 0 01.7.5 3.9 3.9 0 011.4-.3 4 4 0 011.2.2 3.7 3.7 0 01.4-.5.3.3 0 01.5 0 3 3 0 01.7 1.6 2.4 2.4 0 01.4 1.3c0 1.5-.6 2.7-3.2 2.7s-3.2-1.2-3.2-2.7a2.3 2.3 0 01.3-1z" class="cls-5" />
<circle cx="387.1" cy="342.8" r="5.5" class="cls-10" />
<path d="M384.2 341.8a2.7 2.7 0 01.4-1.6.3.3 0 01.5-.1 3 3 0 01.6.5 3.9 3.9 0 011.4-.3 4 4 0 011.2.2 3.7 3.7 0 01.5-.5.3.3 0 01.5 0 3 3 0 01.6 1.6 2.4 2.4 0 01.5 1.3c0 1.5-.6 2.7-3.3 2.7s-3.2-1.2-3.2-2.7a2.3 2.3 0 01.3-1z" class="cls-5" />
<circle cx="401.3" cy="342.8" r="5.5" class="cls-10" />
<path d="M398.4 341.8a2.7 2.7 0 01.4-1.6.3.3 0 01.4-.1 3 3 0 01.7.5 3.9 3.9 0 011.4-.3 4 4 0 011.2.2 3.7 3.7 0 01.4-.5.3.3 0 01.5 0 3 3 0 01.7 1.6 2.4 2.4 0 01.4 1.3c0 1.5-.6 2.7-3.2 2.7s-3.2-1.2-3.2-2.7a2.3 2.3 0 01.3-1z" class="cls-5" />
<circle cx="415.4" cy="342.8" r="5.5" class="cls-10" />
<path d="M412.5 341.8a2.7 2.7 0 01.4-1.6.3.3 0 01.5-.1 2.8 2.8 0 01.6.5 3.9 3.9 0 011.4-.3 4 4 0 011.3.2 3.7 3.7 0 01.4-.5.3.3 0 01.5 0 3 3 0 01.6 1.6 2.4 2.4 0 01.5 1.3c0 1.5-.6 2.7-3.3 2.7s-3.2-1.2-3.2-2.7a2.3 2.3 0 01.3-1z" class="cls-5" />
</g>
<rect width="109.1" height="26.5" x="352.6" y="329.5" class="cls-8" rx="10.1" transform="rotate(180 407.2 342.8)" />
<rect width="105.5" height="26.5" x="365" y="329.5" class="cls-8" rx="10.1" transform="rotate(180 417.7 342.8)" />
<rect width="90.9" height="17.6" x="372.3" y="334" class="cls-9" rx="6.7" transform="rotate(180 417.7 342.8)" />
<g id="tires-front" class='tires'>
<circle cx="382.1" cy="342.8" r="5.5" class="cls-10" />
<path d="M379.2 341.8a2.7 2.7 0 01.4-1.6.3.3 0 01.4-.1 2.8 2.8 0 01.7.5 3.9 3.9 0 011.4-.3 4 4 0 011.2.2 3.7 3.7 0 01.4-.5.3.3 0 01.5 0 3 3 0 01.6 1.6 2.4 2.4 0 01.5 1.3c0 1.5-.6 2.7-3.2 2.7s-3.2-1.2-3.2-2.7a2.3 2.3 0 01.3-1z" class="cls-5" />
<circle cx="396.2" cy="342.8" r="5.5" class="cls-10" />
<path d="M393.3 341.8a2.7 2.7 0 01.4-1.6.3.3 0 01.5-.1 2.8 2.8 0 01.6.5 3.9 3.9 0 011.4-.3 4 4 0 011.2.2 3.7 3.7 0 01.5-.5.3.3 0 01.5 0 3 3 0 01.6 1.6 2.4 2.4 0 01.4 1.3c0 1.5-.5 2.7-3.2 2.7s-3.2-1.2-3.2-2.6a2.3 2.3 0 01.3-1.2z" class="cls-5" />
<circle cx="410.4" cy="342.8" r="5.5" class="cls-10" />
<path d="M407.5 341.8a2.7 2.7 0 01.4-1.6.3.3 0 01.4-.1 2.8 2.8 0 01.7.5 3.9 3.9 0 012.6-.1 4.8 4.8 0 01.4-.5.3.3 0 01.5 0 3 3 0 01.6 1.5 2.4 2.4 0 01.5 1.4c0 1.5-.6 2.7-3.3 2.7s-3.2-1.2-3.2-2.7a2.3 2.3 0 01.4-1z" class="cls-5" />
<circle cx="424.5" cy="342.8" r="5.5" class="cls-10" />
<path d="M421.6 341.8a2.7 2.7 0 01.4-1.6.3.3 0 01.5-.1 2.8 2.8 0 01.6.5 3.9 3.9 0 012.6-.1 4.8 4.8 0 01.5-.5.3.3 0 01.5 0 3 3 0 01.6 1.6 2.4 2.4 0 01.4 1.3c0 1.5-.5 2.7-3.2 2.7s-3.2-1.2-3.2-2.7a2.3 2.3 0 01.3-1z" class="cls-5" />
<circle cx="438.7" cy="342.8" r="5.5" class="cls-10" />
<path d="M435.8 341.8a2.7 2.7 0 01.4-1.6.3.3 0 01.4-.1 2.8 2.8 0 01.7.5 3.9 3.9 0 012.6-.1 4.8 4.8 0 01.4-.5.3.3 0 01.5 0 3 3 0 01.6 1.6 2.4 2.4 0 01.5 1.3c0 1.5-.6 2.7-3.2 2.7s-3.2-1.2-3.2-2.7a2.3 2.3 0 01.3-1z" class="cls-5" />
<circle cx="452.8" cy="342.8" r="5.5" class="cls-10" />
<path d="M450 341.8a2.7 2.7 0 01.3-1.6.3.3 0 01.5-.1 2.8 2.8 0 01.6.5 3.9 3.9 0 012.6-.1 4.8 4.8 0 01.5-.5.3.3 0 01.5 0 3 3 0 01.6 1.6 2.4 2.4 0 01.4 1.3c0 1.5-.5 2.7-3.2 2.7s-3.2-1.2-3.2-2.7a2.3 2.3 0 01.3-1z" class="cls-5" />
</g>
</g>
<path d="M390.8 340.8l11-11h19l13.1 10.1h10.4l5.7-4h6.8l6.1 6.9h20.7l-17-27H315.3l-9.7 25.3 85.3-.3zM364.5 315.8l-9.7 25.3" class="cls-8" />
<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.5zM374.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-3" />
<g id="cannon">
<rect id="cannon-base" width="15.5" height="19.3" x="357.4" y="281.6" class="cls-8" rx="2.7" vector-effect="non-scaling-stroke" />
<path id="cannon-tube" d="M338.5 288.6h27.8v5.3h-27.8a2 2 0 01-2-2v-1.3a2 2 0 012-2z" class="cls-8" transform="rotate(-180 351.4 291.3)" />
<g id="cannon-hole">
<circle id="cannon-back" cx="335" cy="291.6" r="7.7" class="cls-8" />
<.........完整代码请登录后点击上方下载按钮下载查看
热门代码搜索
其他语言代码库
Html代码库
Python代码库
Java代码库
Php代码库
Phpcli代码库
Golang代码库
C#代码库
Nodejs代码库
C代码库
C++代码库
Sql代码库
R代码库
Rust代码库
Ruby代码库
Dart代码库
Vb代码库
D代码库
F#代码库
Typescript代码库
Coffeescript代码库
Julia代码库
Kotlin代码库
Perl代码库
Groovy代码库
Lua代码库
Vala代码库
Ocaml代码库
Assembly代码库
Objectc代码库
Scala代码库
Erlang代码库
Pascal代码库
Swift代码库
Fortran代码库
Bash代码库
Clojure代码库
Ada代码库
Elixir代码库
Cobol代码库
Haskell代码库
Nim代码库
Racket代码库
Lisp代码库
网友评论0