纯css实现程序员的闭关修行动画-html代码-BFW代码库

代码语言：html
所属分类：动画
代码描述：纯css实现程序员的闭关修行动画
下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">

<style>
body {
  margin: 0;
}

.container {
  background: #ffb02f;
  position: relative;
  width: 100%;
  height: 56.25vw;
}
.container div {
  background: black;
  position: absolute;
  transform-origin: 0 50%;
}
.container .lcd-light {
  border-radius: 0;
  left: 18.23vw;
  top: 19.79vw;
  width: 10.42vw;
  height: 18.75vw;
  background: radial-gradient(at center left, white, transparent 75%);
  background: -moz-radial-gradient(center left, white, transparent 75%);
  background: -webkit-radial-gradient(center left, white, transparent 75%);
  transform: rotate(-10deg);
  animation: monitorFlash 0.08s steps(2) infinite alternate;
}
.container .lcd-light::before, .container .lcd-light::after {
  border: 0;
  content: "";
  display: block;
  position: absolute;
}
.container .lcd-light::before {
  border-bottom: 6.25vw solid transparent;
  border-left: 10.42vw solid #ffb02f;
}
.container .lcd-light::after {
  border-top: 3.65vw solid transparent;
  border-left: 9.38vw solid #ffb02f;
  bottom: 0;
}
.container .monitor {
  border-radius: 1.04vw;
  left: 16.67vw;
  top: 23.96vw;
  width: 11.46vw;
  height: 2.08vw;
  transform: rotate(80deg);
}
.container .monitor-neck {
  border-radius: 0;
  left: 14.58vw;
  top: 35.42vw;
  width: 3.65vw;
  height: 1.04vw;
  transform: rotate(-40deg);
}
.container .monitor-base {
  border-radius: 3.13vw 3.13vw 0 0;
  left: 11.46vw;
  top: 35.42vw;
  width: 6.25vw;
  height: 3.13vw;
}
.container .desk {
  border-radius: 2.08vw;
  left: 8.33vw;
  top: 38.02vw;
  width: 18.23vw;
  height: 3.13vw;
}
.container .tower {
  border-radius: 1.04vw;
  left: 8.33vw;
  top: 42.19vw;
  width: 15.63vw;
  height: 9.9vw;
}
.container .tower::before {
  background-color: #ffb02f;
  background-image: repeating-linear-gradient(transparent, transparent 0.52vw, black 0.52vw, black 1.04vw), repeating-linear-gradient(90deg, transparent, transparent 0.52vw, black 0.52vw, black 1.04vw);
  content: "";
  display: block;
  position: absolute;
  top: 2.08vw;
  right: 2.08vw;
  width: 3.65vw;
  height: 2.6vw;
}
.container .chair-back {
  border-radius: 2.08vw;
  left: 38.54vw;
  top: 40.63vw;
  width: 9.9vw;
  height: 3.13vw;
  transform: rotate(-80deg);
}
.container .chair-bottom {
  border-radius: 2.08vw;
  left: 29.69vw;
  top: 43.23vw;
  width: 9.9vw;
  height: 3.13vw;
}
.container .clock {
  border-radius: 50%;
  left: 44.79vw;
  top: 6.25vw;
  width: 8.85vw;
  height: 8.85vw;
  background: white;
  border: 1.82vw solid black;
}
.container .hour, .container .minute {
  will-change: transform;
}
.container .hour {
  border-radius: 1.04vw;
  left: 3.65vw;
  top: 1.56vw;
  width: 1.56vw;
  height: 3.65vw;
  transform-origin: 0.78vw 2.86vw;
  transform: rotate(135deg);
  animation: hrHand 4s linear infinite;
}
.container .minute {
  border-radius: 1.04vw;
  left: 3.65vw;
  top: 0.78vw;
  width: 1.56vw;
  height: 4.43vw;
  transform-origin: 0.78vw 3.65vw;
  animation: minHand 0.3333333333s linear infinite;
}
.container .pillow {
  border-radius: 2.08vw;
  left: 85.94vw;
  top: 40.63vw;
  width: 8.33vw;
  height: 3.13vw;
  transform: rotate(-35deg);
}
.container .bed {
  border-radius: 2.08vw 2.08vw 0.52vw 0.52vw;
  left: 54.69vw;
  top: 43.23vw;
  width: 29.69vw;
  height: 5.21vw;
  background: transparent;
  border-top: 3.13vw solid black;
  border-right: 3.13vw solid black;
  border-left: 3.13vw solid black;
}
.container .human-wrapper {
  transform: translate(68.75vw, 23.44vw);
  will-change: transform;
  animation: bodyMove 8s linear infinite;
}
.container .human {
  background: transparent;
  border-radius: 0;
  left: 0;
  top: 0;
  width: 6.25vw;
  height: 20.31vw;
  transform-origin: 3.13vw 17.71vw;
  transform: rotate(90deg);
  animation: bodyRotate 8s linear infinite;
}
.container .human div {
  will-change: transform;
}
.container .head {
  border-radius: 50%;
  left: 0;
  top: 0;
  width: 6.25vw;
  height: 6.25vw;
  transform: translate(-2.86vw, 0.78vw);
  animation: headMove 8s linear infinite;
}
.container .eyes {
  background: transparent;
  width: 3.13vw;
  height: 1.04vw;
  top: 2.08vw;
  left: 2.34vw;
  transform-origin: 50% 50%;
  transform: rotate(-55deg);
  animation: eyesMove 8s linear infinite;
}
.container .eyes::before, .container .eyes::after {
  background: #dc1e1e;
  border-radius: 50%;
  content: "";
  display: inline-block;
  position: absolute;
  width: 1.04vw;
  height: 1.04vw;
}
.container .eyes::before {
  right: 0.52vw;
}
.container .torso {
  border-radius: 3.13vw;
  left: 1.04vw;
  top: 6.77vw;
  width: 4.17vw;
  height: 12.5vw;
}
.container .r-upper-arm,
.container .r-lower-arm,
.container .l-upper-arm,
.container .l-lower-arm {
  transform-origin: 1.82vw 1.82vw;
}
.container .l-thigh,
.container .r-thigh,
.container .l-lower-leg,
.container .r-lower-leg {
  transform-origin: 2.08vw 2.08vw;
}
.container .r-upper-arm {
  border-radius: 3.13vw;
  left: 0.26vw;
  top: 0;
  width: 3.65vw;
  height: 8.33vw;
  transform: rotate(-40deg);
  animation: RUpArmMove 8s linear infinite;
}
.container .r-lower-arm {
  border-radius: 3.13vw;
  left: 0;
  top: 4.95vw;
  width: 3.65vw;
  height: 8.33vw;
  transform: rotate(-25deg);
  animation: RLowArmMove 8s linear infinite;
}
.container .l-upper-arm {
  border-radius: 3.13vw;
  left: 0.26vw;
  top: 0;
  width: 3.65vw;
  height: 8.33vw;
  transform: rotate(-40deg);
  animation: LUpArmMove 8s linear infinite;
}
.container .l-lower-arm {
  border-radius: 3.13vw;
  left: 0;
  top: 4.95vw;
  width: 3.65vw;
  height: 8.33vw;
  transform: rotate(-25deg);
  animation: LLowArmMove 8s linear infinite;
}
.container .l-thigh,
.container .r-thigh {
  border-radius: 3.13vw;
  left: 0;
  top: 8.33vw;
  width: 4.17vw;
  height: 10.94vw;
  transform: rotate(-5deg);
}
.container .l-thigh {
  animation: LThighMove 8s linear infinite;
}
.container .r-thigh {
  animation: RThighMove 8s linear infinite;
}
.container .l-lower-leg,
.container .r-lower-leg {
  border-radius: 3.13vw;
  left: 0;
  top: 6.77vw;
  width: 4.17vw;
  height: 10.94vw;
  transform: rotate(5deg);
}
.container .l-lower-leg {
  animation: LLowerLegMove 8s linear infinite;
}
.container .r-lower-leg {
  animation: RLowerLegMove 8s linear infinite;
}
.container .reset-anim {
  animation: none;
}

@keyframes monitorFlash {
  from {
    opacity: 1;
  }
  to {
    opacity: 0.75;
  }
}
@keyframes bodyMove {
  from {
    transform: translate(68.75vw, 23.44vw);
  }
  6.9444444444% {
    transform: translate(68.75vw, 23.44vw);
  }
  8.3333333333% {
    transform: translate(68.75vw, 19.53vw);
  }
  15.2777777778% {
    transform: translate(68.75vw, 19.53vw);
  }
  22.2222222222% {
    transform: translate(35.16vw, 19.53vw);
  }
  23.6111111111% {
    transform: translate(33.85vw, 20.31vw);
  }
  25% {
    transform: translate(32.81vw, 23.96vw);
  }
  52.7777777778% {
    transform: translate(32.81vw, 23.96vw);
  }
  54.1666666667% {
    transform: translate(33.33vw, 23.96vw);
  }
  55.5555555556% {
    transform: translate(34.38vw, 23.96vw);
  }
  56.9444444444% {
    transform: translate(34.38vw, 23.96vw);
  }
  58.3333333333% {
    transform: translate(36.46vw, 23.96vw);
  }
  59.7222222222% {
    transform: translate(46.88vw, 19.79vw);
  }
  61.1111111111% {
    transform: translate(48.18vw, 19.79vw);
  }
  62.5% {
    transform: translate(55.99vw, 19.79vw);
  }
  63.8888888889% {
    transform: translate(61.2vw, 21.35vw);
  }
  65.2777777778% {
    transform: translate(68.75vw, 23.44vw);
  }
  to {
    transform: translate(68.75vw, 23.44vw);
  }
}
@keyframes bodyRotate {
  from {
    transform: rotate(90deg);
  }
  6.9444444444% {
    transform: rotate(90deg);
  }
  8.3333333333% {
    transform: rotate(80deg);
  }
  9.7222222222% {
    transform: rotate(70deg);
  }
  11.1111111111% {
    transform: rotate(35deg);
  }
  12.5% {
    transform: rotate(0deg);
  }
  15.2777777778% {
    transform: rotate(0deg);
  }
  16.6666666667% {
    transform: rotate(-3deg);
  }
  22.2222222222% {
    transform: rotate(-3deg);
  }
  23.6111111111% {
    transform: rotate(-30deg);
  }
  25% {
    transform: rotate(-15deg);
  }
  48.6111111111% {
    transform: rotate(-15deg);
  }
  50% {
    transform: rotate(0deg);
  }
  51.3888888889% {
    transform: rotate(0deg);
  }
  52.7777777778% {
    transform: rotate(7deg);
  }
  54.1666666667% {
    transform: rotate(15deg);
  }
  55.5555555556% {
    transform: rotate(25deg);
  }
  56.9444444444% {
    transform: rotate(35deg);
  }
  58.3333333333% {
    transform: rotate(40deg);
  }
  59.7222222222% {
    transform: rotate(70deg);
  }
  61.1111111111% {
    transform: rotate(85deg);
  }
  62.5% {
    transform: rotate(85deg);
  }
  63.8888888889% {
    transform: rotate(88deg);
  }
  65.2777777778% {
    transform: rotate(90deg);
  }
  to {
    transform: rotate(90deg);
  }
}
@keyframes headMove {
  from {
    transform: translate(-2.86vw, 0.78vw);
  }
  6.9444444444% {
    transform: translate(-2.86vw, 0.78vw);
  }
  8.3333333333% {
    transform: translate(-1.3vw, 1.82vw);
  }
  9.7222222222% {
    transform: translate(0vw, 0vw);
  }
  48.6111111111% {
    transform: translate(0vw, 0vw);
  }
  50% {
    transform: translate(-0.52vw, 0vw);
  }
  51.3888888889% {
    transform: translate(0.52vw, 0vw);
  }
  56.9444444444% {
    transform: translate(1.04vw, 0vw);
  }
  58.3333333333% {
    transform: translate(0.52vw, 0vw);
  }
  59.7222222222% {
    transform: translate(0vw, 0vw);
  }
  61.1111111111% {
    transform: translate(-0.52vw, 0.26vw);
  }
  62.5% {
    transform: translate(-0.78vw, 0.26vw);
  }
  63.8888888889% {
    transform: translate(-1.3vw, 0.52vw);
  }
  65.2777777778% {
    transform: translate(-2.86vw, 0.78vw);
  }
  to {
    transform: translate(-2.86vw, 0.78vw);
  }
}
@keyframes eyesMove {
  from {
    transform: rotate(-55deg) scale(1, 0);
  }
  4.1666666667% {
    transform: rotate(-55deg) scale(1, 1);
  }
  6.9444444444% {
    transform: rotate(-55deg) scale(1, 1);
  }
  12.5% {
    transform: rotate(0deg) translate(0vw, 1.04vw);
  }
  13.8888888889% {
    transform: rotate(0deg) translate(-1.04vw, 1.04vw);
  }
  15.2777777778% {
    transform: rotate(0deg) translate(-1.82vw, 1.04vw);
  }
  48.6111111111% {
    transform: rotate(0deg) translate(-1.82vw, 1.04vw);
  }
  50% {
    transform: rotate(30deg) translate(-1.82vw, 1.04vw);
  }
  51.3888888889% {
    transform: rotate(30deg) translate(1.04vw, 1.04vw);
  }
  58.3333333333% {
    transform: rotate(0deg) translate(0.5vw, 1.04vw);
  }
  63.8888888889% {
    transform: rotate(-25deg) translate(0vw, 1.04vw) scale(1, 1);
  }
  65.2777777778% {
    transform: rotate(-55deg) translate(0vw, 0vw) scale(1, 0);
  }
  to {
    transform: rotate(-55deg) translate(0vw, 0vw) scale(1, 0);
  }
}
@keyframes RUpArmMove {
  from {
    transform: rotate(-40deg);
  }
  6.9444444444% {
    transform: rotate(-40deg);
  }
  8.3333333333% {
    transform: rotate(-30deg);
  }
  9.7222222222% {
    transform: rotate(-45deg);
  }
  11.1111111111% {
    transform: rotate(0deg);
  }
  12.5% {
    transform: rotate(15deg);
  }
  13.8888888889% {
    transform: rotate(0deg);
  }
  15.2777777778% {
    transform: rotate(0deg);
  }
  16.6666666667% {
    transform: rotate(-35deg);
  }
  18.0555555556% {
    transform: rotate(-5deg);
  }
  19.4444444444% {
    transform: rotate(25deg);
  }
  20.8333333333% {
    transform: rotate(-5deg);
  }
  22.2222222222% {
    transform: rotate(-35deg);
  }
  23.6111111111% {
    transform: rotate(-15deg);
  }
  25% {
    transform: rotate(65deg);
  }
  48.6111111111% {
    transform: rotate(65deg);
  }
  50% {
    transform: rotate(75deg);
  }
  51.3888888889% {
    transform: rotate(50deg);
  }
  52.7777777778% {
    transform: rotate(40deg);
  }
  54.1666666667% {
    transform: rotate(10deg);
  }
  55.5555555556% {
    transform: rotate(45deg);
  }
  56.9444444444% {
    transform: rotate(-30deg);
  }
  58.3333333333% {
    transform: rotate(-60deg);
  }
  59.7222222222% {
    transform: rotate(-120deg);
  }
  61.1111111111% {
    transform: rotate(-100deg);
  }
  62.5% {
    transform: rotate(-100deg);
  }
  63.8888888889% {
    transform: rotate(-60deg);
  }
  65.2777777778% {
    transform: rotate(-20deg);
  }
  68.0555555556% {
    transform: rotate(-40deg);
  }
  to {
    transform: rotate(-40deg);
  }
}
@keyframes RLowArmMove {
  from {
    transform: rotate(-25deg);
  }
  6.9444444444% {
    transform: rotate(-25deg);
  }
  8.3333333333% {
    transform: rotate(-60deg);
  }
  9.7222222222% {
    transform: rotate(-15deg);
  }
  12.5% {
    transform: rotate(-15deg);
  }
  13.8888888889% {
    transform: rotate(0deg);
  }
  15.2777777778% {
    transform: rotate(0deg);
  }
  16.6666666667% {
    transform: rotate(.........完整代码请登录后点击上方下载按钮下载查看