1. Toy模板网首页
  2. > Toy博客

卡通动画项目 —— 写代码 —— 睡觉 —— 丝滑如德芙

10月前 作者：彩色之外 分类：Toy博客 阅读(33) 违法举报

这篇具有很好参考价值的文章主要介绍了卡通动画项目 —— 写代码 —— 睡觉 —— 丝滑如德芙。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

卡通动画项目 —— 写代码 —— 睡觉 —— 丝滑如德芙

卡通动画项目 —— 写代码 —— 睡觉 —— 丝滑如德芙

 文章来源地址https://www.toymoban.com/news/detail-486212.html

目录

本次实现效果

 目录结构

 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");
});

结语：

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

 

到了这里，关于卡通动画项目 —— 写代码 —— 睡觉 —— 丝滑如德芙的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处： 如若内容造成侵权/违法违规/事实不符，请点击违法举报进行投诉反馈，一经查实，立即删除！

分享到：
领支付宝红包 赞助服务器费用

相关文章

  • Android打造丝滑的Activity recreate重建（主题切换）过渡动画

    Android打造丝滑的Activity recreate重建（主题切换）过渡动画

    当应用程序支持多种语言或主题时，切换语言或主题通常需要重新启动 Activity 以重新加载配置。虽然 recreate 是一种常用的重建 Activity 方法，但它不支持像在 Activity 之间切换时那样使用过渡动画。特别是在切换 浅色/深色 主题时，由于缺乏过渡动画而显得很生硬。为了提升改

    2024年02月22日
    浏览(48)
  • Stable Diffusion 丝滑无闪烁AI动画 Temporalkit+Ebsynth+Controlnet

    Stable Diffusion 丝滑无闪烁AI动画 Temporalkit+Ebsynth+Controlnet

    早期的EbSynth制作的AI视频闪烁能闪瞎人的双眼，可以通过【temporalkit+ebsynth+controlnet】让视频变得丝滑不闪烁。 下载安装 EbSynth官网，这里需要输入email地址。 下载压缩包解压缩到任意位置，这里我放到了 ebsynth_utility 下。 透明背景工具下载地址： https://pypi.org/project/transparen

    2024年02月16日
    浏览(39)
  • 自从项目上了这款轻量级压力测试工具，睡觉真香

    自从项目上了这款轻量级压力测试工具，睡觉真香

    单接口压测是为了能够在开发阶段对单个接口进行性能测试，快速了解接口的承载能力、发现性能瓶颈，在开发早期就能发现问题，消除性能风险。 作为一名优秀的后端工程师，在交付线上环境前，对自己的每一个接口进行简单的性能检测，是一种良好的职业习惯。 另外，

    2023年04月08日
    浏览(58)
  • opencv实践项目-图像卡通化

    opencv实践项目-图像卡通化

    我们通常需要执行两个主要步骤将图像转换为卡通图像：边缘检测和区域平滑。 边缘检测的主要目的显然是为了强调图像的边缘，因为卡通图像通常具有良好的边 缘。同时，区域平滑的主要目的是消除颜色边界并减少图像的噪点，使图像像素化程 度降低。 根据不同滤波器，

    2024年02月07日
    浏览(38)
  • 如何获得一个丝滑的麦轮底盘(原理+代码详解)

    如何获得一个丝滑的麦轮底盘(原理+代码详解)

            本文将用最直白的方式讲述麦轮底盘的控制原理，并且将附上全套stm32代码。 目录 一、准备工作 1. 麦轮简介 2. 安装底盘 二、原理分析 1. 先从一个轮子开始 2. 再到整个底盘 三、运动学逆解 1. 继续从整体分析 2. 最后回到一个轮子 四、离散化和PID 1. 数据离散化 2. 增

    2024年02月05日
    浏览(70)
  • 基于ssm+vue.js+uniapp小程序的校园一卡通系统附带文章和源代码部署视频讲解等

    基于ssm+vue.js+uniapp小程序的校园一卡通系统附带文章和源代码部署视频讲解等

    🌞 博主介绍 ：✌CSDN特邀作者、985计算机专业毕业、某互联网大厂高级全栈开发程序员、码云/掘金/华为云/阿里云/InfoQ/StackOverflow/github等平台优质作者、专注于Java、小程序、前端、python等技术领域和毕业项目实战，以及程序定制化开发、全栈讲解、就业辅导、面试辅导、简

    2024年04月16日
    浏览(79)
  • 堪比Midjourney！上百种风格AI写真丝滑生成，这个开源项目能颠覆照相馆吗？

    堪比Midjourney！上百种风格AI写真丝滑生成，这个开源项目能颠覆照相馆吗？

    概览简介 FaceChain 是一个可以用来打造个人数字形象的深度学习模型工具平台。用户仅需要提供最低一张照片即可获得属于自己的个人形象数字替身。结合不同的风格模型和写真模版，可以生成超乎想象空间的个人写真作品。 更有意思的是，FaceChain 还集成了说话人与虚拟试衣

    2024年02月03日
    浏览(50)

  • bash: 睡觉的冒号；是不是两个点？

    在bash里冒号和躺着的冒号的用法不一样一定要注意别用错。 难道正常的不是两个点）的作用： A sequence expression takes the form {x…y[…incr]}, where x and y are either integers or single characters, and incr, an optional increment, is an integer. When integers are supplied, the expression expands to each number between x

    2024年02月15日
    浏览(41)
  • 【亲测有效】iPhone实现定时关机、开机 - 远离手机 准时睡觉

    【亲测有效】iPhone实现定时关机、开机 - 远离手机 准时睡觉

    一到晚上11点，准时锁定所有应用！配合密码，今晚别想玩手机了！ 首先，iphone、ios自身不支持定时开机关机，第三方APP也没有解决办法！ 但是，苹果手机有一个功能叫“访问时间” 如下图，进入设置 “屏幕使用时间” “为屏幕使用时间设置密码” “停用时间” 开启“定

    2024年02月04日
    浏览(117)
  • 【一些随笔】艰难存折，恨不睡觉：大话年轻人的钱包囧境与梦想退休

    【一些随笔】艰难存折，恨不睡觉：大话年轻人的钱包囧境与梦想退休

    年轻人存款难是指年轻人面临保存资金时遇到的困难。 年轻人存款难就像是吃自助餐时，你手里只有一个小盘子而眼前的美食却多得像大海一样。你费尽心思地挑选着最美味的菜肴，但小盘子实在装不下太多，每次只能夹一点点，结果要不就是吃力不讨好，要不就是放弃了。

    2024年02月10日
    浏览(46)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包，优惠每天领

二维码1

领取红包

二维码2

领红包