鲁比高堡机器动画效果-html代码-BFW代码库

代码语言：html
所属分类：动画
代码描述：鲁比高堡机器动画效果
下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

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

<style>
:root {
  --base-speed: 0.5s;

  --domino-speed: calc(var(--base-speed) * 1.3);
  /**
   * Dominos hit the next domino before finishing their animation. We start the
   * next domino's animation when they actually hit.
   */
  --domino-hit-speed: calc(var(--domino-speed) * 0.25);
  /**
   * The final domino falls all the way down instead of resting on another
   * domino. Since it has further to go, its duration lasts longer so it appears
   * to be going the same speed.
   */
  --last-domino-speed: calc(var(--domino-speed) * 10 / 9);

  --domino-1-delay: 0s;
  --domino-2-delay: calc(var(--domino-1-delay) + var(--domino-hit-speed));
  --domino-3-delay: calc(var(--domino-2-delay) + var(--domino-hit-speed));
  --domino-4-delay: calc(var(--domino-3-delay) + var(--domino-hit-speed));
  --domino-5-delay: calc(var(--domino-4-delay) + var(--domino-hit-speed));
  --domino-6-delay: calc(var(--domino-5-delay) + var(--domino-hit-speed));

  --ball-and-string-speed: calc(var(--base-speed) * 2);
  --ball-and-string-delay: calc(
    var(--domino-6-delay) + var(--domino-speed) * 0.3
  );

  --car-speed: calc(var(--base-speed) * 3);
  --car-delay: calc(
    var(--ball-and-string-delay) + var(--ball-and-string-speed) * 0.25
  );

  --_8-ball-speed: calc(var(--base-speed) * 4.5);
  --_8-ball-delay: calc(var(--car-delay) + var(--car-speed) * 0.62);

  --domino-7-delay: calc(var(--_8-ball-delay) + var(--_8-ball-speed) * 0.9);
  --domino-8-delay: calc(var(--domino-7-delay) + var(--domino-hit-speed));
  --domino-9-delay: calc(var(--domino-8-delay) + var(--domino-hit-speed));
  --domino-10-delay: calc(var(--domino-9-delay) + var(--domino-hit-speed));
  --domino-11-delay: calc(var(--domino-10-delay) + var(--domino-hit-speed));
  --domino-12-delay: calc(var(--domino-11-delay) + var(--domino-hit-speed));

  --last-ball-speed: calc(var(--base-speed) * 3);
  --last-ball-delay: calc(var(--domino-12-delay) + var(--domino-hit-speed));

  --total-duration: calc(var(--last-ball-delay) + var(--last-ball-speed));
}

svg {
  background: #efefd3;
  height: 60vw;
  max-height: 350px;
  transform-origin: top left;
  transition: transform var(--total-duration) ease;
}

svg.game-on {
  transform: translateX(calc(-100% + 100vw));
}

svg * {
  transform-box: fill-box;
}

.domino {
  transform-box: fill-box;
  transition: transform var(--domino-speed);
  transform-origin: bottom right;
}

.domino-last {
  transition-duration: var(--last-domino-speed);
}

.domino-2 {
  transition-delay: var(--domino-2-delay);
}
.domino-3 {
  transition-delay: var(--domino-3-delay);
}
.domino-4 {
  transition-delay: var(--domino-4-delay);
}
.domino-5 {
  transition-delay: var(--domino-5-delay);
}
.domino-6 {
  transition-delay: var(--domino-6-delay);
}
.domino-7 {
  transition-delay: var(--domino-7-delay);
}
.domino-8 {
  transition-delay: var(--domino-8-delay);
}
.domino-9 {
  transition-delay: var(--domino-9-delay);
}
.domino-10 {
  transition-delay: var(--domino-10-delay);
}
.domino-11 {
  transition-delay: var(--domino-11-delay);
}
.domino-12 {
  transition-delay: var(--domino-12-delay);
}

.game-on .domino {
  transform: rotate(76deg);
}

.game-on .domino-last {
  transform: rotate(90deg);
}

#Ball_and_String {
  transform: rotate(33deg);
  transition: transform var(--ball-and-string-speed);
  transition-delay: var(--ball-and-string-delay);
  transition-timing-function: cubic-bezier(0.34, 1.56, 0.64, 1);
  /* This is broken in webkit without these rules */
  transform-box: unset;
  transform-origin: 914px -38px;
}

.game-on #Ball_and_String {
  transform: rotate(-20deg);
}

#Car {
  transition: transform var(--car-speed);
  transition-delay: var(--car-delay);
}

.game-on #Car {
  transform: translateX(710px);
}

.game-on .wheel {
  animation: spin;
  animation-duration: var(--car-speed);
  animation-delay: var(--car-delay);
  transform-origin: center;
}

@keyframes spin {
  from {
    transform: rotate(0deg);
  }

  to {
    transform: rotate(1080deg);
  }
}

.game-on #_8_Ball,
.game-on ._8-ball-center {
  animation: _8_ball_outer;
  animation-duration: var(--_8-ball-speed);
  animation-delay: var(--_8-ball-delay);
  animation-timing-function: ease-in-out;
  animation-fill-mode: forwards;
  transform-origin: center;
}

.game-on ._8-ball-center {
  animation-name: _8_ball_center;
}

@keyframes _8_ball_outer {
  from {
    transform: translate(0, 0);
  }
  35% {
    transform: translate(715px, 115px);
  }
  65% {
    transform: translate(405px, 173px);
  }
  to {
    transform: translate(1120px, 265px);
  }
}

@keyframes _8_ball_center {
  from {
    transform: rotate(0deg);
  }

  35% {
    transform: rotate(720deg);
  }

  65% {
    transform: rotate(360deg);
  }

  to {
    transform: rotate(1080deg);
  }
}

#Final_Ball {
  transition: transform var(--last-ball-speed);
  transition-delay: var(--last-ball-delay);
  transition-timing-function: cubic-bezier(0.34, 1.56, 0.64, 1);
}

.game-on #Final_Ball {
  transform: translateX(325px);
}

.game-on #ball-bumps {
  animation-name: spin;
  animation-duration: var(--last-ball-speed);
  animation-delay: var(--last-ball-delay);
  animation-timing-function: cubic-bezier(0.34, 1.56, 0.64, 1);
  animation-fill-mode: forwards;
  transform-box: fill-box;
  transform-origin: center;
}

/**
 * Base SVG styles: fills, strokes, etc.
 */

.box {
  fill: #c6c4a1;
}
.box-lid {
  fill: #afac84;
}

.domino {
  fill: #ffffff;
  stroke: #000000;
  stroke-width: 1.8046;
  stroke-miterlimit: 10;
}

.ball-1 {
  fill: #9ec10c;
  stroke: #ffffff;
  stroke-width: 1.8;
  stroke-miterlimit: 10;
}

.t-ball-texture {
  fill: none;
  stroke-width: 5;
  stroke-dasharray: 2;
}
.t-ball-texture-1 {
  stroke: #f9f910;
}
.t-ball-texture-2 {
  stroke: #f4f3c6;
}
.t-ball-texture-3 {
  stroke: #abf22f;
}

.string-bg {
  fill: none;
  stroke: #e2ae7a;
  stroke-width: 7;
  stroke-miterlimit: 10;
}

.string-fg {
  fill: none;
  stroke: #00a6f9;
  stroke-width: 5;
  stroke-miterlimit: 10;
  stroke-dasharray: 11.7676, 11.7676;
}

.car-grey-bg {
  fill: #4c4c4b;
}

.tire-bg {
  fill: #42290f;
}

.car-bg {
  fill: #f94212;
}

.tire-dark {
  fill: #0c0601;
}

.wheel-spoke {
  fill: #877d77;
}

.tire-dark-stroke {
  fill: none;
  stroke: #0c0601;
  stroke-width: 2.1673;
  stroke-miterlimit: 10;
}

.wheel-center {
  fill: #ddd8d4;
}

.car-detail {
  fill: none;
  stroke: #877d77;
  stroke-width: 6.5s018;
  stroke-linejoin: round;
  stroke-miterlimit: 10;
}

.tire-highlight {
  fill: #f94212;
  stroke: #444342;
  stroke-width: 0.399;
  stroke-miterlimit: 10;
}

.window {
  opacity: 0.2;
  enable-background: new;
}

.car-detail-1 {
  fill: #444342;
}

._8-ball-bg {
  stroke: #ffffff;
  stroke-width: 2.5469;
  stroke-miterlimit: 10;
}

._8-ball-white {
  fill: #ffffff;
  stroke: #ffffff;
  stroke-width: 0.8906;
  stroke-miterlimit: 10;
}

.last-ball {
  fill: #c13636;
  stroke: #ffffff;
  stroke-width: 4.5644;
  stroke-miterlimit: 10;
}

.ball-bump {
  fill: #823434;
}x

/**
 * Page layout stuff
 */

html,
body {
  margin: 0;
  width: 100%;
  overflow: hidden;
  position: fixed;
}

body {
  background: #c6c4a1;
}

.wrapper {
  position: relative;
}

.controls {
  background: rgba(0, 0, 0, 0.6);
  width: 100%;
  padding: 1em;
  position: fixed;
  bottom: 0;
}

button {
  background: #fff;
  border: none;
  border-radius: 0.2em;
  color: #1d70a4;
  cursor: pointer;
  font-size: 1em;
  border: none;
  padding: 0.75em 1.25em;
  transition: transform 0.1s ease-out, box-shadow 0.1s ease-out;
}

button:hover {
  box-shadow: 0px 2px 5px 0px rgba(0, 0, 0, 0.3);
  transform: scale(1.01) translateY(-2px);
}

button:active {
  box-shadow: none;
  transform: scale(0.99);
}
</style>

</head>
<body translate="no">
<div class="wrapper">
<div class="demo">
<svg viewBox="0 0 4500 946.7">
<g id="Backgrounds">
<line class="string-bg" x1="2084.5" y1="437.6" x2="2880.1" y2="535.8" />
<line class="string-bg" x1="2405.2" y1="597.4" x2="2880.1" y2="538.8" />
<line class="string-bg" x1="2405.2" y1="597.4" x2="3200.7" y2="695.6" />
<line class="string-fg" x1="2084.5" y1="437.6" x2="2880.1" y2="535.8" />
<line class="string-fg" x1="2405.2" y1="597.4" x2="2880.1" y2="538.8" />
<line class="string-fg" x1="2405.2" y1="597.4" x2="3200.7" y2="695.6" />
<rect y="387" class="box" width="646" height="559.7" />
<rect x="1089.4" y="434.1" class="box" width="1006.1" height="512.6" />
<rect x="3200.7" y="693.7" class="box" width="1249.7" height="253" />
<rect x="2880.1" y="387.9" class="box-lid" width="10.2" height="559.7" />
<rect x="2394.1" y="486.7" class="box-lid" width="10.2" height="460" />
<rect x="4410.3" y="204.9" class="box" width="253" height="741.8" />
<rect y="387" class="box-lid" width="653.3" height="37.9" />
<rect x="1082.2" y="434.7" class="box-lid" width="1021.4" height="37.9" />
<rect x="3192.4" y="693.8" class="box-lid" width="1470.9" height="37.9" />
<rect x="4404.9" y="167" class="box-lid" width="258.4" height="37.9" />
</g>
<g id="First_Dominos">
<path class="domino domino-1" d="M57.4,391.8H45.5c-2.7,0-4.9-2.2-4.9-4.9V270.4c0-2.7,2.2-4.9,4.9-4.9h11.9c2.7,0,4.9,2.2,4.9,4.9V387
        C62.3,389.6,60.1,391.8,57.4,391.8z" />
<path class="domino domino-2" d="M155,391.8h-11.9c-2.7,0-4.9-2.2-4.9-4.9V270.4c0-2.7,2.2-4.9,4.9-4.9H155c2.7,0,4.9,2.2,4.9,4.9V387
        C159.9,389.6,157.7,391.8,155,391.8z" />
<path class="domino domino-3" d="M252.6,391.8h-11.9c-2.7,0-4.9-2.2-4.9-4.9V270.4c0-2.7,2.2-4.9,4.9-4.9h11.9c2.7,0,4.9,2.2,4.9,4.9V387
        C257.5,389.6,255.3,391.8,252.6,391.8z" />
<path class="domino domino-4" d="M350.2,391.8h-11.9c-2.7,0-4.9-2.2-4.9-4.9V270.4c0-2.7,2.2-4.9,4.9-4.9h11.9c2.7,0,4.9,2.2,4.9,4.9V387
        C355.1,389.6,352.9,391.8,350.2,391.8z" />
<path class="domino domino-5" d="M447.8,391.8h-11.9c-2.7,0-4.9-2.2-4.9-4.9V270.4c0-2.7,2.2-4.9,4.9-4.9h11.9c2.7,0,4.9,2.2,4.9,4.9V387
            C452.7,389.6,450.5,391.8,447.8,391.8z" />
<path class="domino domino-6 domino-last" d="M545.4,391.8h-11.9c-2.7,0-4.9-2.2-4.9-4.9V270.4c0-2.7,2.2-4.9,4.9-4.9h11.9c2.7,0,4.9,2.2,4.9,4.9V387
        C550.3,389.6,548.1,391.8,545.4,391.8z" />
</g>
<g id="Ball_and_String">
<line class="string-bg" x1="914" y1="379.1" x2="914.2" y2="-38.6" />
<line class="string-fg" x1="914" y1="379.1" x2="914.2" y2="-38.6" />
<circle class="ball-1" cx="914" cy="412" r="55" />
<line class="t-ball-texture t-ball-texture-1" x1="874.5" y1="373.7" x2="859.2" y2="410" />
<line class="t-ball-texture t-ball-texture-1" x1="889.2" y1="363.1" x2="861.8" y2="427.8" />
<line class="t-ball-texture t-ball-texture-1" x1="908.2" y1="356.8" x2="870.5" y2="445.9" />
<line class="t-ball-texture t-ball-texture-1" x1="924.8" y1="357.9" x2="882.9" y2="457" />
<line class="t-ball-texture t-ball-texture-1" x1="966.7" y1="412.6" x2="951.3" y2="448.9" />
<line class="t-ball-texture t-ball-texture-1" x1="964" y1="394.8" x2="936.7" y2="459.5" />
<line class="t-ball-texture t-ball-texture-1" x1="955.4" y1="376.7" x2="917.7" y2="465.8" />
<line class="t-ball-texture t-ball-texture-1" x1="942.9" y1="365.6" x2="901.1" y2="464.7" />
<line class="t-ball-texture t-ball-texture-2" x1="912.4" y1="357.6" x2="875.9" y2="372.4" />
<line class="t-ball-texture t-ball-texture-2" x1="930.2" y1="360.4" x2="865.1" y2="386.8" />
<line class="t-ball-texture t-ball-texture-2" x1="948.1" y1="369.4" x2="858.5" y2="405.7" />
<line class="t-ball-texture t-ball-texture-2" x1="959" y1="382" x2="859.4" y2="422.4" />
<line class="t-ball-texture t-ball-texture-2" x1="950" y1="450.2" x2="913.5" y2="465" />
<line class="t-ball-texture t-ball-texture-2" x1="960.7" y1="435.8" x2="895.6" y2="462.2" />
<line class="t-ball-texture t-ball-texture-2" x1="967.4" y1="416.9" x2="877.7" y2="453.2" />
<line class="t-ball-texture t-ball-texture-2" x1="966.4" y1="400.2" x2="866.8" y2="440.6" />
<line class="t-ball-texture t-ball-texture-3" x1="950.5" y1="372.9" x2="914.3" y2="357.6" />
<line class="t-ball-texture t-ball-texture-3" x1="961.1" y1="387.6" x2="896.4" y2="360.2" />
<line class="t-ball-texture t-ball-texture-3" x1="967.4" y1="406.5" x2="878.4" y2="368.9" />
<line class="t-ball-texture t-ball-texture-3" x1="966.3" y1="423.2" x2="867.2" y2="381.3" />
<line class="t-ball-texture t-ball-texture-3" x1="911.6" y1="465" x2="875.3" y2="449.7" />
<line class="t-ball-texture t-ball-texture-3" x1="929.4" y1="462.4" x2="864.7" y2="435" />
<line class="t-ball-texture t-ball-texture-3" x1="947.5" y1="453.7" x2="858.4" y2="416.1" />
<line class="t-ball-texture t-ball-texture-3" x1="958.6" y1="441.3" x2="859.6" y2="399.4" />
</g>
<g id="Car">
<g>
<path class="car-grey-bg" d="M1351.7,431c0,0-43.3-11.3-61.1-11.7c-17.8-0.4-131.3-3-131.3-3h-55l19.1-34.7l60.2-8.7l158.2,12.1l19.1,20.4
          L1351.7,431z" />
<g class="wheel">
<circle class="tire-bg" cx="1145.5" cy=".........完整代码请登录后点击上方下载按钮下载查看