程序员获取灵感专注写代码的动画效果代码-html代码-BFW代码库

代码语言：html
所属分类：动画
代码描述：程序员获取灵感专注写代码的动画效果代码
下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html>
<html lang="en" >

<head>

  <meta charset="UTF-8">
  

<style>
* {
  box-sizing: border-box;
}
:root {
  --green-one: #9be9a8;
  --green-two: #40c463;
  --green-three: #30a14e;
  --green-four: #216e39;
  --grey: #ebedf0;
  --shirt: var(--green-one);
  --shirt-shade: var(--green-two);
  --skin: #ebe0e0;
  --skin-shade: #c2a3a3;
  --stroke: #333;
  --laptop: #c7c7c7;
  --laptop-main: #4d4d4c;
  --laptop-shade: rgba(58,58,59,0.5);
  --laptop-badge: #fff;
  --beard: #bf8040;
  --beard: #ae6113;
  --beard-light: #d9b38c;
  --beard-light: #ea943e;
  --eyes: var(--stroke);
  --strap: #bf4040;
  --strap: var(--green-four);
  --cheeks: #df9f9f;
  --cap: #404040;
  --sparks: rgba(255,255,153,0.85);
  --bulb: rgba(255,255,153,0.85);
  --filament: #000;
  --screw: #ccc;
  --bg: #6e7c91;
  --owl-1: #feec90;
  --owl-2: #c6e472;
  --owl-3: #f88a68;
  --owl-4: #80cbc5;
  --owl-5: #c793ec;
}
body {
  display: -webkit-box;
  display: flex;
  -webkit-box-align: center;
          align-items: center;
  -webkit-box-pack: center;
          justify-content: center;
  min-height: 100vh;
  background: var(--bg);
}
.vvg {
  height: 50vmin;
  overflow: visible !important;
}
.vvg__code-block {
  fill: var(--block-color, var(--owl-1));
}
.vvg__bulb-bulb {
  fill: var(--bulb);
}
.vvg__bulb-dashes {
  stroke: var(--sparks);
  stroke-width: 4px;
}
.vvg__bulb-filament {
  stroke: var(--filament);
}
.vvg__bulb-screw {
  fill: var(--screw);
}
.vvg__cheeks {
  fill: var(--cheeks);
}
.vvg__cap-body {
  fill: var(--cap);
}
.vvg__cap-strap {
  fill: var(--strap);
}
.vvg__cap-notch {
  fill: var(--stroke);
}
.vvg-stroke {
  stroke: var(--stroke);
  stroke-width: 2px;
}
.vvg__eyes {
  fill: var(--eyes);
  stroke: var(--eyes);
}
.vvg-hair {
  fill: var(--beard);
}
.vvg-hair--light {
  fill: var(--beard-light);
}
.vvg__shirt {
  fill: var(--shirt);
}
.vvg__shirt--shade {
  fill: var(--shirt-shade);
}
.vvg-skin {
  fill: var(--skin);
}
.vvg-skin--shade {
  fill: var(--skin-shade);
}
.vvg__laptop-badge {
  fill: var(--laptop-badge);
}
.vvg__laptop-shell {
  fill: var(--laptop);
}
.vvg__laptop-shell--main {
  fill: var(--laptop-main);
}
.vvg__laptop-shell--shade {
  fill: var(--laptop-shade);
}
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: #424a57;
}
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 class="vvg" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="vvg" viewBox="0 0 104.211 178.897">
  <defs>
    <clipPath id="b">
      <path d="M242.822 893.869c0 61.251-36.059 106.284-94.208 106.284-54.326 0-91.436-45.033-91.436-106.284 0-61.252 37.668-85.951 90.973-85.951 53.306 0 94.67 24.699 94.67 85.95z" fill="red"/>
    </clipPath>
    <clipPath id="d">
      <ellipse ry="23.111" rx="23.762" cy="827.682" cx="68.304"/>
    </clipPath>
    <clipPath id="e">
      <ellipse transform="scale(-1 1)" cx="-231.243" cy="827.682" rx="23.762" ry="23.111" fill="#803300"/>
    </clipPath>
    <g id="a">
      <rect width="159.025" height="12.562" x="182.011" y="79.443" ry="0" fill="#fa4d32"/>
      <rect ry="0" y="92.004" x="182.011" height="12.562" width="159.025" fill="#fdb020"/>
      <rect width="159.025" height="12.562" x="182.011" y="104.566" ry="0" fill="#fdf133"/>
      <rect ry="0" y="117.128" x="182.011" height="12.562" width="159.025" fill="#1ce590"/>
      <rect width="159.025" height="12.562" x="182.011" y="129.689" ry="0" fill="#13a1e3"/>
      <rect ry="0" y="142.251" x="182.011" height="12.562" width="159.025" fill="#7e2ae4"/>
      <rect width="159.025" height="12.562" x="182.011" y="154.813" ry="0" fill="#9e4ea5"/>
    </g>
    <g id="c">
      <use height="100%" width="100%" xlink:href="#a" transform="rotate(-45 965.632 1098.357) scale(2 3)"/>
      <use height="100%" width="100%" xlink:href="#a" transform="rotate(-45 1282.497 967.107) scale(2 3)"/>
    </g>
  </defs>
  <g transform="translate(67.874 -9.03)">
    <g class="vvg__body">
      <ellipse class="vvg__shirt vvg__shirt--shade vvg-stroke" transform="translate(3.085 -12.7)" cx="-18.854" cy="148.83" rx="37.558" ry="34.35" stroke-linecap="round" stroke-linejoin="round"/>
      <path class="vvg__shirt" d="M-19.325 101.965a37.558 34.35 0 00-34.001 34.165 37.558 34.35 0 0033.706 34.165 37.558 34.35 0 0034-34.165 37.558 34.35 0 00-33.705-34.165z" />
      <circle class="vvg__neck vvg-skin vvg-stroke" transform="translate(3.085 -12.7)" cx="-18.854" cy="112.584" r="13.363" stroke-linecap="round" stroke-linejoin="round"/>
      <ellipse class="vvg__body-outline vvg-stroke" transform="translate(3.085 -12.7)" ry="34.35" rx="37.558" cy="148.83" cx="-18.854" fill="none" stroke-linecap="round" stroke-linejoin="round"/>
    </g>
    <g class="vvg__head-group">
      <g class="vvg__head">
        <circle class="vvg-skin vvg__ear vvg-stroke" r="8.553" cy="73.563" cx="-59.067" stroke-linecap="round" stroke-linejoin="round" transform="translate(.406)"/>
        <g class="vvg__face">
          <circle class="vvg-skin--shade" cx="-15.769" cy="63.674" r="44.099" stroke-linecap="round" stroke-linejoin="round"/>
          <path class="vvg-skin" d="M-21.87 20.047a44.1 44.1 0 00-37.998 43.627A44.1 44.1 0 00-21.84 107.3a44.1 44.1 0 0038-43.626 44.1 44.1 0 00-38.03-43.627z" fill="#f4e3d7"/>
        </g>
        <g class="vvg__beard">
          <path class="vvg-hair" d="M-54.193 42.078a44.1 44.1 0 00-5.675 21.596 44.1 44.1 0 0044.099 44.1 44.1 44.1 0 0044.1-44.1 44.1 44.1 0 00-5.67-21.523c5.746 41.309-17.27 46.421-38.43 46.421-21.174 0-45.005-4.052-38.424-46.494z" stroke-linecap="round" stroke-linejoin="round"/>
          <path class="vvg-hair--light" d="M-54.193 42.078a44.1 44.1 0 00-5.675 21.596 44.1 44.1 0 0019.076 36.252 43.902 43.902 0 0020.79 5.201c24.355 0 44.1-19.744 44.1-44.1a44.09 44.09 0 00-.544-6.775c-.075 30.245-20.437 34.32-39.323 34.32-21.174 0-45.005-4.052-38.424-46.494z"/>
          <path class="vvg-stroke vvg__beard-outline" d="M-54.193 42.078a44.1 44.1 0 00-5.675 21.596 44.1 44.1 0 0044.099 44.1 44.1 44.1 0 0044.1-44.1 44.1 44.1 0 00-5.67-21.523c5.746 41.309-17.27 46.421-38.43 46.421-21.174 0-45.005-4.052-38.424-46.494z" fill="none" stroke-linecap="round" stroke-linejoin="round"/>
        </g>
        <g class="vvg__moustache">
          <path class="vvg-hair" d="M4.78 89.546A20.548 12.028 0 00-5.496 79.13a20.548 12.028 0 00-20.548 0 20.548 12.028 0 00-10.274 10.416h20.548z" stroke-linecap="round" stroke-linejoin="round"/>
          <path class="vvg-hair--light" d="M-17.866 77.593a20.548 12.028 0 00-8.177 1.537 20.548 12.028 0 00-10.274 10.416H.546A20.548 12.028 0 00-9.728 79.13a20.548 12.028 0 00-8.138-1.537z"/>
          <path class="vvg__moustache-outline vvg-stroke" d="M4.78 89.546A20.548 12.028 0 00-5.496 79.13a20.548 12.028 0 00-20.548 0 20.548 12.028 0 00-10.274 10.416h20.548z" fill="none" stroke-width="1.654" stroke-linecap="round" stroke-linejoin="round"/>
        </g>
        <g class="vvg__eyes-group">
          <g class="vvg-stroke vvg__eyes" transform="translate(.487)" stroke-width="1.296" stroke-linecap="round" stroke-linejoin="round">
            <circle r="1.998" cy="64.681" cx="-33.494"/>
            <circle cx=".983" cy="64.681" r="1.998"/>
          </g>
        </g>
        <rect class="vvg__hair vvg-hair" width="57.452" height="26.269" x="-44.495" y="22.4" ry="4.438"/>
        <g class="vvg__cheeks" transform="translate(-.468)">
          <circle r="3.875" cy="73.162" cx="-39.021"/>
          <circle cx="8.419" cy="73.162" r="3.875"/>
        </g>
        <g class="vvg__eyebrows vvg-stroke" fill="none" stroke-linecap="round" stroke-linejoin="round">
          <path d="M-40.713 61.55a6.123 6.123 0 018.486-5.699"/>
          <path d="M9.176 61.55a6.123 6.123 0 00-8.487-5.7"/>
        </g>
      </g>
      <g class="vvg__cap">
        <rect class="vvg-stroke vvg__cap-strap" width="43.566" height="7.408" x="-37.953" y="42.542" ry="3.704" stroke-linecap="round" stroke-linejoin="round"/>
        <rect class="vvg-stroke vvg__cap-strap" ry="3.704" y="42.542" x="-22.798" height="7.408" width="28.411" stroke-linecap="round" stroke-linejoin="round"/>
        <ellipse class=" vvg-stroke vvg__cap-button" cx="-15.769" cy="10.626" rx="2.847" ry="1.157" stroke-linecap="round" stroke-linejoin="round"/>
        <circle class="vvg__cap-notch" cx="-17.198" cy="46.246" r=".945"/>
        <circle class="vvg__cap-notch" r=".945" cy="46.246" cx="-5.67"/>
        <circle class="vvg__cap-notch" cx="-11.339" cy="46.246" r=".945"/>
        <path class="vvg__cap-body vvg-stroke" d="M-14.755 11.393a42.956 38.567 0 00-22.492 5.157 42.956 38.567 0 00-21.478 33.4h26.174v-2.467c2.27-12.737 2.466-12.32 16.782-12.32 14.316 0 14.577-.028 15.98 12.32v2.467h26.976A42.956 38.567 0 005.71 16.55a42.956 38.567 0 00-20.464-5.157z" stroke-linecap="round" stroke-linejoin="round"/>
      </g>
    </g>
    <!-- <path d="M-14.755 11.393a42.956 38.567 0 00-22.492 5.157 42.956 38.567 0 00-21.478 33.4h26.174v-2.467c2.27-12.737 2.466-12.32 16.782-12.32 14.316 0 14.577-.028 15.98 12.32v2.467h26.976A42.956 38.567 0 005.71 16.55a42.956 38.567 0 00-20.464-5.157z" fill="#4d4d4d" stroke="#000" stroke-width="1.323" stroke-linecap="round" stroke-linejoin="round"/> -->
    <g class="vvg__bulb" transform="translate(-39.365 -11.864)" stroke-linecap="round">
      <path class="vvg__bulb-dashes" d="M10.794 5.982a22.935 22.935 0 1125.335.178" fill="none.........完整代码请登录后点击上方下载按钮下载查看