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

纯css实现程序员的闭关修行动画

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