卡通形象人物2 写代码-睡觉 丝滑如德芙

news2024/11/17 4:48:03

 

目录

本次实现效果

 目录结构

 index

static/css/style.css

static/js/script.js

结语：

前期回顾      

【 css动画 】—— 把你喜欢css动画嵌入到浏览器中_0.活在风浪里的博客-CSDN博客常用酷炫动画999+合集，代码直接复制可用，总用你想找的，快来抱走吧，三连，停！听鹅说，下次一定、下次一定……https://blog.csdn.net/m0_57904695/article/details/127846345?spm=1001.2014.3001.5501下一篇JS实现斗地主功能

本文实现了包含形象的卡通小人吃、睡、电脑工作的网页动画，js循环动画，简单的画面设计。非常丝滑有意思，欢迎对此代码感兴趣的朋友前来下载参考。

如果大家非常好奇该段代码所带来的动画效果的话，那就直接拷贝到自己电脑上，本动画还做了屏幕适应，不上传了资源了，方便大家直接玩乐，如果对你有些微帮助还请收藏以备下次及时找到！

 本文直接复制可以用，

本次实现效果

 目录结构

 

 

 

 index

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Eat, Sleep, Game, Repeat ___ 0.1.活在风浪里~！</title>
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <link rel="stylesheet" href="static/css/style.css" />
  </head>
  <body>
    <div class="container">
      <div class="lcd-light"></div>
      <div class="monitor"></div>
      <div class="monitor-neck"></div>
      <div class="monitor-base"></div>
      <div class="desk"></div>
      <div class="tower"></div>
      <div class="chair-back"></div>
      <div class="chair-bottom"></div>
      <div class="clock">
        <div class="hour"></div>
        <div class="minute"></div>
      </div>
      <div class="pillow"></div>
      <div class="bed"></div>
      <div class="human-wrapper">
        <div class="human">
          <div class="head">
            <div class="eyes"></div>
          </div>
          <div class="torso">
            <div class="l-thigh">
              <div class="l-lower-leg"></div>
            </div>
            <div class="r-thigh">
              <div class="r-lower-leg"></div>
            </div>
            <div class="r-upper-arm">
              <div class="r-lower-arm"></div>
            </div>
            <div class="l-upper-arm">
              <div class="l-lower-arm"></div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <script src="static/js/script.js"></script>
    <a href="" style="display: none"></a>
  </body>
</html>

static/css/style.css

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(30deg);
  }
  22.2222222222% {
    transform: rotate(30deg);
  }
  23.6111111111% {
    transform: rotate(80deg);
  }
  25% {
    transform: rotate(40deg);
  }
  26.3888888889% {
    transform: rotate(50deg);
  }
  27.7777777778% {
    transform: rotate(80deg);
  }
  29.1666666667% {
    transform: rotate(50deg);
  }
  30.5555555556% {
    transform: rotate(20deg);
  }
  31.9444444444% {
    transform: rotate(50deg);
  }
  33.3333333333% {
    transform: rotate(80deg);
  }
  34.7222222222% {
    transform: rotate(50deg);
  }
  36.1111111111% {
    transform: rotate(20deg);
  }
  37.5% {
    transform: rotate(50deg);
  }
  38.8888888889% {
    transform: rotate(80deg);
  }
  40.2777777778% {
    transform: rotate(50deg);
  }
  41.6666666667% {
    transform: rotate(20deg);
  }
  43.0555555556% {
    transform: rotate(50deg);
  }
  44.4444444444% {
    transform: rotate(80deg);
  }
  45.8333333333% {
    transform: rotate(50deg);
  }
  47.2222222222% {
    transform: rotate(20deg);
  }
  48.6111111111% {
    transform: rotate(50deg);
  }
  50% {
    transform: rotate(25deg);
  }
  51.3888888889% {
    transform: rotate(20deg);
  }
  52.7777777778% {
    transform: rotate(20deg);
  }
  54.1666666667% {
    transform: rotate(10deg);
  }
  55.5555555556% {
    transform: rotate(-30deg);
  }
  56.9444444444% {
    transform: rotate(-30deg);
  }
  58.3333333333% {
    transform: rotate(-40deg);
  }
  59.7222222222% {
    transform: rotate(-30deg);
  }
  63.8888888889% {
    transform: rotate(-45deg);
  }
  65.2777777778% {
    transform: rotate(-30deg);
  }
  66.6666666667% {
    transform: rotate(-30deg);
  }
  69.4444444444% {
    transform: rotate(-25deg);
  }
  to {
    transform: rotate(-25deg);
  }
}
@keyframes LUpArmMove {
  from {
    transform: rotate(-40deg);
  }
  6.9444444444% {
    transform: rotate(-40deg);
  }
  8.3333333333% {
    transform: rotate(-60deg);
  }
  9.7222222222% {
    transform: rotate(-80deg);
  }
  11.1111111111% {
    transform: rotate(-60deg);
  }
  12.5% {
    transform: rotate(-30deg);
  }
  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(60deg);
  }
  25% {
    transform: rotate(65deg);
  }
  48.6111111111% {
    transform: rotate(65deg);
  }
  50% {
    transform: rotate(15deg);
  }
  51.3888888889% {
    transform: rotate(5deg);
  }
  52.7777777778% {
    transform: rotate(0deg);
  }
  58.3333333333% {
    transform: rotate(-80deg);
  }
  59.7222222222% {
    transform: rotate(-45deg);
  }
  65.2777777778% {
    transform: rotate(30deg);
  }
  68.0555555556% {
    transform: rotate(-40deg);
  }
  to {
    transform: rotate(-40deg);
  }
}
@keyframes LLowArmMove {
  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(30deg);
  }
  23.6111111111% {
    transform: rotate(30deg);
  }
  25% {
    transform: rotate(40deg);
  }
  26.3888888889% {
    transform: rotate(50deg);
  }
  27.7777777778% {
    transform: rotate(20deg);
  }
  29.1666666667% {
    transform: rotate(50deg);
  }
  30.5555555556% {
    transform: rotate(80deg);
  }
  31.9444444444% {
    transform: rotate(50deg);
  }
  33.3333333333% {
    transform: rotate(20deg);
  }
  34.7222222222% {
    transform: rotate(50deg);
  }
  36.1111111111% {
    transform: rotate(80deg);
  }
  37.5% {
    transform: rotate(50deg);
  }
  38.8888888889% {
    transform: rotate(20deg);
  }
  40.2777777778% {
    transform: rotate(50deg);
  }
  41.6666666667% {
    transform: rotate(80deg);
  }
  43.0555555556% {
    transform: rotate(50deg);
  }
  44.4444444444% {
    transform: rotate(20deg);
  }
  45.8333333333% {
    transform: rotate(50deg);
  }
  47.2222222222% {
    transform: rotate(70deg);
  }
  48.6111111111% {
    transform: rotate(75deg);
  }
  50% {
    transform: rotate(70deg);
  }
  52.7777777778% {
    transform: rotate(-15deg);
  }
  58.3333333333% {
    transform: rotate(-85deg);
  }
  59.7222222222% {
    transform: rotate(-90deg);
  }
  66.6666666667% {
    transform: rotate(-25deg);
  }
  to {
    transform: rotate(-25deg);
  }
}
@keyframes RThighMove {
  from {
    transform: rotate(-5deg);
  }
  6.9444444444% {
    transform: rotate(-5deg);
  }
  8.3333333333% {
    transform: rotate(-30deg);
  }
  9.7222222222% {
    transform: rotate(-80deg);
  }
  11.1111111111% {
    transform: rotate(-30deg);
  }
  12.5% {
    transform: rotate(0deg);
  }
  15.2777777778% {
    transform: rotate(0deg);
  }
  16.6666666667% {
    transform: rotate(-15deg);
  }
  18.0555555556% {
    transform: rotate(15deg);
  }
  19.4444444444% {
    transform: rotate(30deg);
  }
  20.8333333333% {
    transform: rotate(15deg);
  }
  22.2222222222% {
    transform: rotate(30deg);
  }
  23.6111111111% {
    transform: rotate(70deg);
  }
  25% {
    transform: rotate(90deg);
  }
  52.7777777778% {
    transform: rotate(90deg);
    height: 10.94vw;
  }
  54.1666666667% {
    transform: rotate(0deg);
    height: 7.29vw;
  }
  58.3333333333% {
    transform: rotate(0deg);
    height: 7.29vw;
  }
  59.7222222222% {
    transform: rotate(-50deg);
    height: 10.94vw;
  }
  61.1111111111% {
    transform: rotate(-90deg);
  }
  62.5% {
    transform: rotate(-60deg);
  }
  63.8888888889% {
    transform: rotate(-30deg);
  }
  65.2777777778% {
    transform: rotate(-5deg);
  }
  to {
    transform: 3rotate -5deg;
  }
}
@keyframes RLowerLegMove {
  from {
    transform: rotate(5deg);
  }
  6.9444444444% {
    transform: rotate(5deg);
  }
  8.3333333333% {
    transform: rotate(30deg);
  }
  9.7222222222% {
    transform: rotate(15deg);
  }
  11.1111111111% {
    transform: rotate(0deg);
  }
  15.2777777778% {
    transform: rotate(0deg);
  }
  16.6666666667% {
    transform: rotate(-15deg);
  }
  22.2222222222% {
    transform: rotate(-15deg);
  }
  23.6111111111% {
    transform: rotate(-25deg);
  }
  25% {
    transform: rotate(-70deg);
  }
  50% {
    transform: rotate(-70deg);
  }
  51.3888888889% {
    transform: rotate(-80deg);
  }
  52.7777777778% {
    transform: rotate(-70deg) translateY(0);
  }
  54.1666666667% {
    transform: rotate(-30deg) translateY(-3.65vw);
  }
  55.5555555556% {
    transform: rotate(0deg) translateY(-3.65vw);
  }
  56.9444444444% {
    transform: rotate(5deg) translateY(-3.65vw);
  }
  58.3333333333% {
    transform: rotate(10deg) translateY(-3.65vw);
  }
  59.7222222222% {
    transform: rotate(60deg) translateY(0);
  }
  61.1111111111% {
    transform: rotate(30deg);
  }
  62.5% {
    transform: rotate(60deg);
  }
  63.8888888889% {
    transform: rotate(30deg);
  }
  65.2777777778% {
    transform: rotate(5deg);
  }
  to {
    transform: rotate(5deg);
  }
}
@keyframes LThighMove {
  from {
    transform: rotate(-5deg);
  }
  6.9444444444% {
    transform: rotate(-5deg);
  }
  8.3333333333% {
    transform: rotate(-30deg);
  }
  13.8888888889% {
    transform: rotate(0deg);
  }
  15.2777777778% {
    transform: rotate(0deg);
  }
  16.6666666667% {
    transform: rotate(30deg);
  }
  18.0555555556% {
    transform: rotate(15deg);
  }
  19.4444444444% {
    transform: rotate(-15deg);
  }
  20.8333333333% {
    transform: rotate(15deg);
  }
  22.2222222222% {
    transform: rotate(-15deg);
  }
  23.6111111111% {
    transform: rotate(50deg);
  }
  25% {
    transform: rotate(90deg);
  }
  48.6111111111% {
    transform: rotate(90deg);
    height: 10.94vw;
  }
  50% {
    transform: rotate(0deg);
    height: 6.77vw;
  }
  51.3888888889% {
    transform: rotate(-5deg);
    height: 6.77vw;
  }
  52.7777777778% {
    transform: rotate(-10deg);
    height: 6.77vw;
  }
  54.1666666667% {
    transform: rotate(-70deg);
    height: 6.77vw;
  }
  58.3333333333% {
    transform: rotate(-40deg);
    height: 6.77vw;
  }
  59.7222222222% {
    transform: rotate(-110deg);
    height: 10.94vw;
  }
  61.1111111111% {
    transform: rotate(-190deg);
  }
  62.5% {
    transform: rotate(-50deg);
  }
  63.8888888889% {
    transform: rotate(-5deg);
  }
  to {
    transform: rotate(-5deg);
  }
}
@keyframes LLowerLegMove {
  from {
    transform: rotate(5deg);
  }
  6.9444444444% {
    transform: rotate(5deg);
  }
  8.3333333333% {
    transform: rotate(30deg);
  }
  12.5% {
    transform: rotate(30deg);
  }
  13.8888888889% {
    transform: rotate(0deg);
  }
  15.2777777778% {
    transform: rotate(0deg);
  }
  16.6666666667% {
    transform: rotate(-30deg);
  }
  18.0555555556% {
    transform: rotate(-15deg);
  }
  22.2222222222% {
    transform: rotate(-15deg);
  }
  23.6111111111% {
    transform: rotate(-50deg);
  }
  25% {
    transform: rotate(-90deg);
  }
  48.6111111111% {
    transform: rotate(-90deg) translateY(0);
  }
  50% {
    transform: rotate(0deg) translateY(-4.95vw);
  }
  51.3888888889% {
    transform: rotate(0deg) translateY(-4.95vw);
  }
  52.7777777778% {
    transform: rotate(30deg) translateY(-4.95vw);
  }
  54.1666666667% {
    transform: rotate(35deg) translateY(-4.95vw);
  }
  55.5555555556% {
    transform: rotate(30deg) translateY(-4.95vw);
  }
  56.9444444444% {
    transform: rotate(0deg) translateY(-4.95vw);
  }
  58.3333333333% {
    transform: rotate(5deg) translateY(-4.17vw);
  }
  59.7222222222% {
    transform: rotate(45deg) translateY(0);
  }
  61.1111111111% {
    transform: rotate(145deg);
  }
  62.5% {
    transform: rotate(55deg);
  }
  63.8888888889% {
    transform: rotate(25deg);
  }
  65.2777777778% {
    transform: rotate(5deg);
  }
  to {
    transform: rotate(5deg);
  }
}
@keyframes hrHand {
  from {
    transform: rotate(135deg);
  }
  to {
    transform: rotate(495deg);
  }
}
@keyframes minHand {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(1turn);
  }
}

static/js/script.js

/* For restaring animations on window resize */

const animParts = [
    "lcd-light",
    "hour",
    "minute",
	"human-wrapper",
	"human",
	"head",
	"eyes",
	"r-upper-arm",
	"r-lower-arm",
	"l-upper-arm",
	"l-lower-arm",
	"l-thigh",
	"r-thigh",
	"l-lower-leg",
	"r-lower-leg"
];

function restartAnims(animClassArray, resetClass) {
	for (let i = 0; i < animClassArray.length; ++i) {
		// get animated elements and reset animations
		let animClass = document.getElementsByClassName(animClassArray[i])[0];
		animClass.className += " " + resetClass;

		// reflow
		let animClassW = animClass.offsetWidth;
		animClass.offsetWidth = animClassW;

		// animation reset class removed
		animClass.className = animClassArray[i];
	}
}

window.addEventListener("resize", function(){
  restartAnims(animParts, "reset-anim");
});

以上则是全部代码，希望代码不成为现实

下一篇JS斗地主游戏，欢迎来指指点点，哈哈

结语：

本文就要结束了，感谢大家的阅读！

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/339259.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

【Java】 JAVA Notes

【Java】 JAVA Notes

JAVA语言帮助笔记Java的安装与JDKJava命名规范JAVA的数据类型自动类型转换强制类型转换JAVA的运算符取余运算结果的符号逻辑运算的短路运算三元运算符运算符优先级JAVA的流程控制分支结构JAVA类Scanner类Math 类random方法获取随机数Java的安装与JDK JDK安装网站&#xff1a;h…
阅读更多...
AXI 总线协议学习笔记（4）

AXI 总线协议学习笔记（4）

引言 前面两篇博文从简单介绍的角度说明了 AXI协议规范。 AXI 总线协议学习笔记&#xff08;2&#xff09; AXI 总线协议学习笔记&#xff08;3&#xff09; 从本篇开始&#xff0c;详细翻译并学习AXI协议的官方发布规范。 文档中的时序图说明&#xff1a; AXI指&#xff1…
阅读更多...
基础面试题：堆和栈的区别

基础面试题：堆和栈的区别

面试题&#xff1a;堆和栈的区别&#xff08;往往讲的是内存zha&#xff09; 为什么说访问栈栈比访问堆快些&#xff1f; 目录 一、数据结构中的堆栈 1、数据结构中的堆 1&#xff09;堆的定义 2&#xff09;堆的效率 2、 数据结构中的栈 二、内存中的堆栈 1、内存堆的定义…
阅读更多...
Stm32 for arduino STM32G071GBU6 I2C and SERIAL

Stm32 for arduino STM32G071GBU6 I2C and SERIAL

文件目录: C:\Users\Administrator\AppData\Local\Arduino15\packages\STMicroelectronics\hardware\stm32\2.3.0\variants\STM32G0xx\G071G(6-8-B)U_G081GBU boards_entry.txt Generic G071GBUx GenG0.menu.pnum.GENERIC_G071GBUXGeneric G071GBUx GenG0.menu.pnum.GENERIC…
阅读更多...
SpringMVC：统一异常处理（11）

SpringMVC：统一异常处理（11）

统一异常处理1. 说明2. 问题描述3. 异常处理器使用3.1 创建异常处理器类3.2 让程序抛出异常3.3 测试4. 项目异常处理方案4.1 异常分类4.2 异常解决方案4.3 异常解决方案的具体实现4.4 测试5. 总结1. 说明 \quad本篇文章是在文章SpringMVC&#xff1a;SSM整合&#xff08;Spring…
阅读更多...
【Vuex 源码学习】第六篇 - Vuex 的模块收集

【Vuex 源码学习】第六篇 - Vuex 的模块收集

一&#xff0c;前言 上一篇&#xff0c;主要介绍了 Vuex 中 Mutations 和 Actions 的实现&#xff0c;主要涉及以下几个点&#xff1a; 将 options 选项中定义的 mutation 方法绑定到 store 实例的 mutations 对象&#xff1b;创建并实现 commit 方法&#xff08;同步&#x…
阅读更多...
最近挺火的人工智能chatGPT注册

最近挺火的人工智能chatGPT注册

文章目录1.前提预备1.1 短信接收平台1.2 ip加速&#xff0c;不做说明2.注册chatGPT步骤2.1 进入chat.openai.com网址后&#xff0c;点击sign up2.2 可以使用qq邮箱注册2.3 填写好邮箱&#xff0c;然后点击Continue,然后再填写密码2.4 之后在qq邮箱进行验证注册(注意&#xff1a…
阅读更多...
C++入门——内存管理

C++入门——内存管理

C入门——内存管理 C/C内存分布 分类是为了更好的管理 int globalVar 1; static int staticGlobalVar 1; void Test() {static int staticVar 1;int localVar 1;int num1[10] {1, 2, 3, 4};char char2[] "abcd";char* pChar3 "abcd";int* ptr1 (…
阅读更多...
Java、JSP环境保护与宣传网站的设计与实现

Java、JSP环境保护与宣传网站的设计与实现

技术&#xff1a;Java、JSP等摘要&#xff1a;本文对环境保护与宣传网站的设计和开发过程进行了详细地分析与叙述。按照系统开发的实际操作流程以及论文编写的规范&#xff0c;论文内容从系统概述、系统分析、系统设计和系统实现这四大模块对系统的开发过程分别进行了阐述。系统…
阅读更多...
python3-API流量回放/锲约测试/自动化测试

python3-API流量回放/锲约测试/自动化测试

PPL-Tester 简介 http工具集,通过代理获取到API的请求与响应信息,将这些请求信息进行流量回放/锲约测试或快速生成用例, 亦可通过人工进行修改参数化提取、变量引用、断言等形成API自动化测试用例等！ 你以为只是流量回放吗？错~走去瞧瞧v2版本！ 看官~请记得给个star呗？ 项…
阅读更多...
驱动 | Linux | NVMe - 1. 概述

驱动 | Linux | NVMe - 1. 概述

本文主要参考2篇相关的解析 1’ 2 和 linux 源码 3。 此处推荐一个可以便捷查看 linux 源码的网站 bootlin 4。 更新&#xff1a;2022 / 02 / 11 驱动 | Linux | NVMe - 1. 概述与nvme_core_init函数解析NVMe 的前世今生NVMe CommandPCI 总线从架构角度看 NVMe 驱动NVMe 驱动的…
阅读更多...
前端开发中如何处理接口数据过大的问题

前端开发中如何处理接口数据过大的问题

题引&#xff1a; 当我们在公司做项目的时候&#xff0c;难免会遇到后端接口直接给你返回成千上万的数据进行渲染。如果我们直接一股脑遍历添加的话&#xff0c;就会导致空白页面的等待时间是很长且异常卡顿&#xff0c;那么对于数据过大的渲染就需要进行特殊的处理。这也是一…
阅读更多...
PyQt5数据库开发1 4.1 SQL Server 2008 R2如何开启数据库的远程连接

PyQt5数据库开发1 4.1 SQL Server 2008 R2如何开启数据库的远程连接

文章目录 前言 步骤/方法 1 使用windows身份登录 2 启用混合登录模式 3 允许远程连接服务器 4 设置sa用户属性 5 配置服务器 6 重新登录 7 配置SSCM 8 确认防火墙设置 注意事项 前言 SQL Server 2008 R2如何开启数据库的远程连接 SQL Server 2008默认是不允许远程连…
阅读更多...
ExecutorService、Callable、Future实现有返回结果的多线程原理解析

ExecutorService、Callable、Future实现有返回结果的多线程原理解析

在并发多线程场景下&#xff0c;存在需要获取各线程的异步执行结果&#xff0c;这时&#xff0c;就可以通过ExecutorService线程池结合Callable、Future来实现。 我们先来写一个简单的例子—— public class ExecutorTest {public static void main(String[] args) throws Ex…
阅读更多...
KMP 算法

KMP 算法

1 应用场景-字符串匹配问题  字符串匹配问题&#xff1a;&#xff1a; 有一个字符串 str1 ““硅硅谷 尚硅谷你尚硅 尚硅谷你尚硅谷你尚硅你好””&#xff0c;和一个子串 str2“尚硅谷你尚硅 你” 2) 现在要判断 str1 是否含有 str2, 如果存在&#xff0c;就返回第一次出现…
阅读更多...
数据与C（limits.h数据常数介绍）

数据与C（limits.h数据常数介绍）

本章简单的介绍一下limits.h的数据常量&#xff0c;这里简单了解一下就好了 目录 一.limits.h 二.float.h头文件 一.limits.h CHAR_BIT char类型的位数 CHARMAX char类型的最大值 CHAR_MIN char类型的最小值 SCHAR_MAX signed char类型的最大…
阅读更多...
SpringBoot图片上传和访问路径映射

SpringBoot图片上传和访问路径映射

图片上传和静态资源映射编写controller层接口上传到文件夹相关配置1 application.properties配置文件&#xff1a;2 Constant类&#xff1a;文件的资源映射配置WebMvcConfigurer的继承类注意测试编写controller层接口 ApiOperation("图片上传功能")PostMapping(&quo…
阅读更多...
Java笔记-volatile和AtomicInteger

Java笔记-volatile和AtomicInteger

目录1. volatile1.1.什么是volatile1.2.JMM-Java内存模型2 验证volatile的特性2.1 可见性2.2.验证volatile不保证原子性2.3 volatile实现禁止指令重排序3.使用AtomicInteger解决volatile的不能实现原子性的问题3.2 AtomicInteger的方法说明&#xff1a;3.3 CAS3.4 应用1. volat…
阅读更多...
linux-进程1-进程概述

linux-进程1-进程概述

写在最前 记录一下linux的进程学习专题 1. 程序和进程的区别 1.1 程序 程序是包含一系列信息的文件&#xff0c;这些信息描述了如何在运行时创建一个进程&#xff1a; 二进制格式标识&#xff1a;每个程序文件都包含用于描述可执行文件格式的元信息。内核利用此信息来解 释文…
阅读更多...
Redis实战-session共享之修改登录拦截器

Redis实战-session共享之修改登录拦截器

在上一篇中Redis实战之session共享&#xff0c;我们知道了通过Redis实现session共享了&#xff0c;那么token怎么续命呢&#xff1f;怎么刷新用户呢&#xff1f;本来咱们就通过拦截器来实现这两个功能。 登录拦截器优化&#xff1a; 先来看看现在拦截器情况&#xff1a; 拦截…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023