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