gsap程序员用键盘扫射应用动画-html代码-BFW代码库

代码语言：html
所属分类：动画
代码描述：gsap程序员用键盘扫射应用动画
下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">

<style>
* {
  box-sizing: border-box;
}
:root {
  --jeans: #737373;
  --ground-hue: 190;
  --belt: #000;
  --fur-dark: #73370d;
  --fur: #8a420f;
  --fur-light: #b8672e;
  --muzzle: #e6b999;
  --tank: #d9d9d9;
  --nose: #0d0d0d;
  --bandana: #f20d0d;
  --keyboard-body: #404040;
  --keyboard-key: #8c8c8c;
  --keyboard-accent: #7359a6;
  --bg: hsl(var(--ground-hue), 60%, 95%);
}
body {
  min-height: 100vh;
  display: -webkit-box;
  display: flex;
  -webkit-box-align: center;
          align-items: center;
  -webkit-box-pack: center;
          justify-content: center;
  background: var(--bg);
}
svg {
  width: 60vmin;
}
.ground {
  --alpha: 0.5;
  fill: hsla(var(--ground-hue), 60%, 60%, var(--alpha, 1));
}
.bear__jeans {
  fill: var(--jeans);
}
.bear__belt {
  fill: var(--belt);
}
.bear__muzzle {
  fill: var(--muzzle);
}
.bear__shoulder--left {
  fill: var(--fur-dark);
}
.bear__tank {
  fill: var(--tank);
}
.bear__nose {
  fill: var(--nose);
}
.bear__bandana {
  fill: var(--bandana);
}
.bear__fur,
.bear__paw {
  fill: var(--fur);
}
.bear__fur--light,
.bear__paw--light {
  fill: var(--fur-light);
}
.keyboard__body {
  fill: var(--keyboard-body);
}
.keyboard__key {
  fill: var(--keyboard-key);
}
.keyboard__key--accented {
  fill: var(--keyboard-accent);
}
.code-block {
  fill: hsl(var(--hue), 100%, 50%);
}
label {
  height: 44px;
  width: 44px;
  position: fixed;
  bottom: 1rem;
  right: 1rem;
  cursor: pointer;
}
label > svg {
  position: absolute;
  height: 100%;
  width: 100%;
  top: 0;
  left: 0;
}
label path {
  fill: hsl(var(--ground-hue), 60%, 60%);
}
label svg:nth-of-type(1) {
  display: none;
}
[type='checkbox'] {
  height: 0;
  width: 0;
}
:checked ~ label svg:nth-of-type(1) {
  display: block;
}
:checked ~ label svg:nth-of-type(2) {
  display: none;
}
</style>

</head>
<body translate="no">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 194.05 120.82">
<g transform="translate(58.03 -57.75)">
<rect class="ground" ry="3.18" y="172.21" x="33.49" height="6.36" width="102.52" style="stroke:none;stroke-width:15.875;stroke-linecap:square;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1"></rect>
<path class="bear__jeans" d="M79.38 136.78a39.24 46.3 0 00-38.63 38.36h12.92a25.95 30.62 0 01.3-2.26 25.95 30.62 0 01.64-2.97 25.95 30.62 0 01.89-2.87 25.95 30.62 0 011.12-2.76 25.95 30.62 0 011.36-2.6 25.95 30.62 0 011.57-2.45 25.95 30.62 0 011.77-2.23 25.95 30.62 0 011.95-2.02 25.95 30.62 0 012.1-1.78 25.95 30.62 0 012.26-1.53 25.95 30.62 0 012.36-1.25 25.95 30.62 0 012.47-.96 25.95 30.62 0 012.53-.67 25.95 30.62 0 012.57-.37 25.95 30.62 0 011.84-.08 25.95 30.62 0 012.59.16 25.95 30.62 0 012.56.45 25.95 30.62 0 012.52.76 25.95 30.62 0 012.43 1.05 25.95 30.62 0 012.34 1.33 25.95 30.62 0 012.2 1.6 25.95 30.62 0 012.07 1.85 25.95 30.62 0 011.9 2.09 25.95 30.62 0 011.71 2.3 25.95 30.62 0 011.51 2.49 25.95 30.62 0 011.3 2.65 25.95 30.62 0 011.05 2.8 25.95 30.62 0 01.82 2.9 25.95 30.62 0 01.57 2.98 25.95 30.62 0 01.14 1.4h12.93a39.24 46.3 0 00-38.66-38.37z" style="opacity:1;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:14.61518764;stroke-linecap:square;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1"></path>
<rect class="bear__belt" y="125.62" x="57.51" height="18.89" width="43.72" style="opacity:1;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:21.45877838;stroke-linecap:square;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1"></rect>
<circle class="bear__shoulder bear__shoulder--left" r="11.34" cy="114.82" cx="49.51" style="opacity:1;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:5;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1"></circle>
<rect class="bear__tank" ry="4.85" y="106.5" x="54.9" height="33.43" width="48.95" style="opacity:1;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:4.10835218;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1"></rect>
<g class="bear__head">
<rect class="bear__fur bear__face" ry="5.64" y="74.94" x="61.23" height="37.99" width="36.29" style="opacity:1;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:4.21629286;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1"></rect>
<circle class="bear__fur bear__ear" r="7.94" cy="73.54" cx="64.03" style="opacity:1;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:3.28125;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1"></circle>
<rect class="bear__bandana" ry="0" y="82.08" x="59.15" height="9.83" width="40.44" style="opacity:1;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:4.12773705;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1"></rect>
<path class="bear__muzzle" d="M62.78 96.67c-.53 0-1.05.06-1.55.16v10.46a5.63 5.63 0 005.64 5.64h15.9v-6.65c0-5.32-3.76-9.6-8.43-9.6z" style="opacity:1;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:15.93559551;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1"></path>
<path class="bear__bandana bear__bandana-tie" d="M100.95 87.66h4.78c2.38 0 4.3 6.22 4.3 8.6h-9.08c-2.39 0-4.3-6.22-4.3-8.6h4.3z" style="opacity:1;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:20.28494453;stroke-linecap:square;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1"></path>
<rect class="bear__nose" ry="3.21" y="95.63" x="60.17" height="6.43" width="12.28" style="opacity:1;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:2.94184494;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1"></rect>
<circle class="bear__fur bear__ear" style="opacity:1;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:3.28125;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1" cx="94.72" cy="73.54" r="7.94"></circle>
</g>
<g class="bear__keyboard-arm">
<g class="keyboard" transform="rotate(12.57 341.33 136.91)">
<g transform="matrix(1.0972 0 0 1.0972 -13.05 -63.96)">
<rect class="keyboard__body" y="221.42" x="29.93" height="21.7" width="76.99" style="opacity:1;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:17.24043465;stroke-linecap:square;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1"></rect>
<g transform="translate(1.98 21.96)">
<rect class="keyboard__key keyboard__key--accented" style="opacity:1;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:15.59976292;stroke-linecap:square;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1" width="29.2" height="3.97" x="44.35" y="215.86" ry="0"></rect>
<rect class="keyboard__key keyboard__key--accented" style="opacity:1;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:12.99630928;stroke-linecap:square;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1" width="3.97" height="3.97" x="29.27" y="205.81"></rect>
<rect class="keyboard__key" y="205.81" x="64.46" height="3.97" width="3.97" style="opacity:1;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:12.99630928;stroke-linecap:square;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1"></rect>
<rect class="keyboard__key" style="opacity:1;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:12.99630928;stroke-linecap:square;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1" width="3.97" height="3.97" x="59.43" y="205.81"></rect>
<rect class="keyboard__key" y="205.81" x="54.4" height="3.97" width="3.97" style="opacity:1;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:12.99630928;stroke-linecap:square;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1"></rect>
<rect class="keyboard__key" style="opacity:1;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:12.99630928;stroke-linecap:square;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1" width="3.97" height="3.97" x="49.38" y="205.81"></rect>
<rect class="keyboard__key" y="205.81" x="44.35" height="3.97" width="3.97" style="opacity:1;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:12.99630928;stroke-linecap:square;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1"></rect>
<rect class="keyboard__key" style="opacity:1;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:12.99630928;stroke-linecap:square;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1" width="3.97" height="3.97" x="34.3" y="205.81"></rect>
<rect class="keyboard__key" y="205.81" x="39.32" height="3.97" width="3.97" style="opacity:1;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:12.99630928;stroke-linecap:square;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1"></rect>
<rect class="keyboard__key" style="opacity:1;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:12.99630928;stroke-linecap:square;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1" width="3.97" height="3.97" x="64.46" y="210.83"></rect>
<rect class="keyboard__key" y="210.83" x="59.43" height="3.97" width="3.97" style="opacity:1;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:12.99630928;stroke-linecap:square;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1"></rect>
<rect class="keyboard__key" style="opacity:1;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:12.99630928;stroke-linecap:square;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1" width="3.97" height="3.97" x="54.4" y="210.83"></rect>
<rect class="keyboard__key" y="210.83" x="49.38" height="3.97" width="3.97" style="opacity:1;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:12.99630928;stroke-linecap:square;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1"></rect>
<rect class="keyboard__key" style="opacity:1;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:12.99630928;stroke-linecap:square;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1" width="3.97" height="3.97" x="44.35" y="210.83"></rect>
<rect class="keyboard__key" y="210.83" x="39.32" height="3.97" width="3.97" style="opacity:1;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:12.99630928;stroke-linecap:square;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1"></rect>
<rect class="keyboard__key keyboard__key--accented" style="opacity:1;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:19.56653404;stroke-linecap:square;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1" width="9" height="3.97" x="29.27" y="210.83"></rect>
<rect class="keyboard__key" style="opacity:1;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:12.99630928;stroke-linecap:square;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1" width="3.97" height="3.97" x="74.51" y="205.81"></rect>
<rect class="keyboard__key" y="210.83" x="69.49" height="3.97" width="3.97" style="opacity:1;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:12.99630928;stroke-linecap:square;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1"></rect>
<rect class="keyboard__key" style="opacity:1;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:12.99630928;stroke-linecap:square;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1" width="3.97" height="3.97" x="74.51" y="210.83"></rect>
<rect class="keyboard__key" y="215.86" x="39.32" height="3.97" width="3.97" style="opacity:1;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:12.99630928;stroke-linecap:square;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1"></rect>
<rect class="keyboard__key" style="opacity:1;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:12.99630928;stroke-linecap:square;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1" width="3.97" height="3.97" x="34.3" y="215.86"></rect>
<rect class="keyboard__key keyboard__key--accented" y="215.86" x="29.27" height="3.97" width="3.97" style="opacity:1;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:12.99630928;stroke-linecap:square;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1"></rect>
<rect class="keyboard__key" style="opacity:1;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:12.99630928;stroke-linecap:square;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1" width="3.97" height="3.97" x="69.49" y="205.81"></rect>
<rect class="keyboard__key" y="210.83" x="89.59" height="3.97" width="3.97" style="opacity:1;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:12.99630928;stroke-linecap:square;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1"></rect>
<rect class="keyboard__key" style="opacity:1;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:12.99630928;stroke-linecap:square;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1" width="3.97" height="3.97" x="79.54" y="210.83"></rect>
<rect class="keyboard__key keyboard__key--accented" y="210.83" x="84.57" height="3.97" width="3.97" style="opacity:1;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:12.99630928;stroke-linecap:square;stroke-linejoin:round;stroke-miterlimit:4;stroke.........完整代码请登录后点击上方下载按钮下载查看