程序员获取灵感专注写代码的动画效果代码-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" c.........完整代码请登录后点击上方下载按钮下载查看