css实现三维多米诺骨牌动画效果代码

代码语言:html

所属分类:动画

代码描述:css实现三维多米诺骨牌动画效果代码

代码标签: css 三维 多米诺 骨牌 动画

下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开


<!DOCTYPE html>
<html lang="en" >

<head>

  <meta charset="UTF-8">


  
  
<style>
:root {
  --w: min(15vw, 160px);
  --h: calc(2 * var(--w));
  --d: calc(var(--w) * 0.3);
  --r: calc(2.5 * var(--h));
}

body {
  display: grid;
  place-items: center;
  min-height: 100vh;
  perspective: 1200px;
  background: linear-gradient(to bottom, #1f1f1f, #0a0a0a);
  overflow: hidden;
}

.dominoes {
  display: grid;
  place-items: center;
  position: relative;
  width: 100%;
  height: 100%;
  transform: rotateX(-30deg) scale3d(0.4, 0.4, 0.4);
  transform-style: preserve-3d;
}

.table {
  position: absolute;
  width: calc(3 * var(--h));
  height: calc(3 * var(--h));
  transform-style: preserve-3d;
  background: red;
  transform: rotateX(60deg) translatey(50px);
  background: linear-gradient(to bottom, #0d0d0d, #1a1a1a);
  border: 2px solid #1a1a1a;
}

.domino {
  position: absolute;
  width: var(--w);
  height: var(--h);
  transform-style: preserve-3d;
  transform-origin: bottom center;
  -webkit-animation: fall 2s ease-in-out infinite;
          animation: fall 2s ease-in-out infinite;
  transform: rotatey(var(--a)) rotatex(0deg) translatex(var(--r));
}
.domino > div {
  position: absolute;
  transform-style: preserve-3d;
  -webkit-backface-visibility: hidden;
          backface-visibility: hidden;
  border: 1px solid rgba(255, 255, 255, 0.5);
}
.domino .lt, .domino .rt {
  height: var(--h);
  width: var(--d);
  background: #dce1bf;
}
.domino .tp, .domino .bt {
  height: var(--d);
  width: var(--w);
  background: #fafbf7;
}
.domino .ft, .domino .bk {
  width: var(--w);
  height: var(--h);
}
.domino .ft {
  background: #ebeedb;
  background: linear-gradient(to bottom, #eff1e2, #e3e7cd 51%);
  transform: rotateY(0deg) translateZ(calc(var(--d) / 2));
}
.domino .rt {
  right: 0;
  transform: rotateY(90deg) translateZ(calc(var(--d) / 2));
}
.domino .bk {
  transform: rotateY(180deg) translateZ(calc(var(--d) / 2));
  background: linear-gradient(to bottom, #e7ebd4 49%, black, #e7ebd4 51%);
}
.domino .bk::before, .domino .bk::after {
  content: "";
  position: absolute;
  width: 20%;
  aspect-ratio: 1;
  background-color: black;
  border-radius: 50%;
  left: 50%;
  top: 25%;
  transform: translate(-50%);
}
.domino .bk::after {
  top: 75%;
}
.domino .lt {
  left: 0;
  transform: rotateY(-90deg) translateZ(calc(var(--d) / 2));
}
.domino .tp {
  top: 0;
  transform: rotateX(90deg) translateZ(calc(var(--d) / 2));
}
.domino .bt {
  bottom: 0;
  transform: rotateX(-90deg) translateZ(calc(var(--d) / 2));
}

.domino:nth-child(1) {
  --a: calc((360deg / 40) * 1);
  -webkit-animation-delay: calc(.05s * 1);
          animation-delay: calc(.05s * 1);
}

.domino:nth-child(2) {
  --a: calc((360deg / 40) * 2);
  -webkit-animation-delay: calc(.05s * 2);
          animation-delay: calc(.05s * 2);
}

.domino:nth-child(3) {
  --a: calc((360deg / 40) * 3);
  -webkit-animation-delay: calc(.05s * 3);
          animation-delay: calc(.05s * 3);
}

.domino:nth-child(4) {
  --a: calc((360deg / 40) * 4);
  -webkit-animation-delay: calc(.05s * 4);
          animation-delay: calc(.05s * 4);
}

.domino:nth-child(5) {
  --a: calc((360deg / 40) * 5);
  -webkit-animation-delay: calc(.05s * 5);
          animation-delay: calc(.05s * 5);
}

.domino:nth-child(6) {
  --a: calc((360deg / 40) * 6);
  -webkit-animation-delay: calc(.05s * 6);
          animation-delay: calc(.05s * 6);
}

.domino:nth-child(7) {
  --a: calc((360deg / 40) * 7);
  -webkit-animation-delay: calc(.05s * 7);
          animation-delay: calc(.05s * 7);
}

.domino:nth-child(8) {
  --a: calc((360deg / 40) * 8);
  -webkit-animation-delay: calc(.05s * 8);
          animation-delay: calc(.05s * 8);
}

.domino:nth-child(9) {
  --a: calc((360deg / 40) * 9);
  -webkit-animation-delay: calc(.05s * 9);
          animation-delay: calc(.05s * 9);
}

.domino:nth-child(10) {
  --a: calc((360deg / 40) * 10);
  -webkit-animation-delay: calc(.05s * 10);
          animation-delay: calc(.05s * 10);
}

.domino:nth-child(11) {
  --a: calc((360deg / 40) * 11);
  -webkit-animation-delay: calc(.05s * 11);
          animation-delay: calc(.05s * 11);
}

.domino:nth-child(12) {
  --a: calc((360deg / 40) * 12);
  -webkit-animation-delay: calc(.05s * 12);
          animation-delay: calc(.05s * 12);
}

.domino:nth-child(13) {
  --a: calc((360deg / 40) * 13);
  -webkit-animation-delay: calc(.05s * 13);
          animation-delay: calc(.05s * 13);
}

.domino:nth-child(14) {
  --a: calc((360deg / 40) * 14);
  -webkit-animation-delay: calc(.05s * 14);
          animation-delay: calc(.05s * 14);
}

.domino:nth-child(15) {
  --a: calc((360deg / 40) * 15);
  -webkit-animation-delay: calc(.05s * 15);
          animation-delay: calc(.05s * 15);
}

.domino:nth-child(16) {
  --a: calc((360deg / 40) * 16);
  -webkit-animation-delay: calc(.05s * 16);
          animation-delay: calc(.05s * 16);
}

.domino:nth-child(17) {
  --a: calc((360deg / 40) * 17);
  -webkit-animation-delay: calc(.05s * 17);
          animation-delay: calc(.05s * 17);
}

.domino:nth-child(18) {
  --a: calc((360deg / 40) * 18);
  -webkit-animation-delay: calc(.05s * 18);
          animation-delay: calc(.05s * 18);
}

.domino:nth-child(19) {
  --a: calc((360deg / 40) * 19);
  -webkit-animation-delay: calc(.05s * 19);
          animation-delay: calc(.05s * 19);
}

.domino:nth-child(20) {
  --a: calc((360deg / 40) * 20);
  -webkit-animation-delay: calc(.05s * 20);
          animation-delay: calc(.05s * 20);
}

.domino:nth-child(21) {
  --a: calc((360deg / 40) * 21);
  -webkit-animation-delay: calc(.05s * 21);
          animation-delay: calc(.05s * 21);
}

.domino:nth-child(22) {
  --a: calc((360deg / 40) * 22);
  -webkit-animation-delay: calc(.05s * 22);
          animation-delay: calc(.05s * 22);
}

.domino:nth-child(23) {
  --a: calc((360deg / 40) * 23);
  -webkit-animation-delay: calc(.05s * 23);
          animation-delay: calc(.05s * 23);
}

.domino:nth-child(24) {
  --a: calc((360deg / 40) * 24);
  -webkit-animation-delay: calc(.05s * 24);
          animation-delay: calc(.05s * 24);
}

.domino:nth-child(25) {
  --a: calc((360deg / 40) * 25);
  -webkit-animation-delay: calc(.05s * 25);
          animation-delay: calc(.05s * 25);
}

.domino:nth-child(26) {
  --a: calc((360deg / 40) * 26);
  -webkit-animation-delay: calc(.05s * 26);
          animation-delay: calc(.05s * 26);
}

.domino:nth-child(27) {
  --a: calc((360deg / 40) * 27);
  -webkit-animation-delay: calc(.05s * 27);
          animation-delay: calc(.05s * 27);
}

.domino:nth-child(28) {
  --a: calc((360deg / 40) * 28);
  -webkit-animation-delay: calc(.05s * 28);
          animation-delay: calc(.05s * 28);
}

.domino:nth-child(29) {
  --a: calc((360deg / 40) * 29);
  -webkit-animation-delay: calc(.05s * 29);
          animation-delay: calc(.05s * 29);
}

.domino:nth-child(30) {
  --a: calc((360deg / 40) * 30);
  -webkit-animation-delay: calc(.05s * 30);
          animation-delay: calc(.05s * 30);
}

.domino:nth-child(31) {
  --a: calc((360deg / 40) * 31);
  -webkit-animation-delay: calc(.05s * 31);
          animation-delay: calc(.05s * 31);
}

.domino:nth-child(32) {
  --a: calc((360deg / 40) * 32);
  -webkit-animation-delay: calc(.05s * 32);
          animation-delay: calc(.05s * 32);
}

.domino:nth-child(33) {
  --a: calc((360deg / 40) * 33);
  -webkit-animation-delay: calc(.05s * 33);
          animation-delay: calc(.05s * 33);
}

.domino:nth-child(34) {
  --a: calc((360deg / 40) * 34);
  -webkit-animation-delay: calc(.05s * 34);
          animation-delay: calc(.05s * 34);
}

.domino:nth-child(35) {
  --a: calc((360deg / 40) * 35);
  -webkit-animation-delay: calc(.05s * 35);
          animation-delay: calc(.05s * 35);
}

.domino:nth-child(36) {
  --a: calc((360deg / 40) * 36);
  -webkit-animation-delay: calc(.05s * 36);
          animation-delay: calc(.05s * 36);
}

.domino:nth-child(37) {
  --a: calc((360deg / 40) * 37);
  -webkit-animation-delay: calc(.05s * 37);
          animation-delay: calc(.05s * 37);
}

.domino:nth-child(38) {
  --a: calc((360deg / 40) * 38);
  -webkit-animation-delay: calc(.05s * 38);
          animation-delay: calc(.05s * 38);
}

.domino:nth-child(39) {
  --a: calc((360deg / 40) * 39);
  -webkit-animation-delay: calc(.05s * 39);
          animation-delay: calc(.05s * 39);
}

.domino:nth-child(40) {
  --a: calc((360deg / 40) * 40);
  -webkit-animation-delay: calc(.05s * 40);
          animation-delay: calc(.05s * 40);
}

@-webkit-keyframes fall {
  0%, 71% {
    transform: rotatey(var(--a)) rotatex(0deg) translatex(var(--r));
  }
  14%, 56% {
    transform: rotatey(var(--a)) rotatex(70deg) translatex(var(--r));
  }
  67% {
    transform: rotatey(var(--a)) rotatex(-2deg) translatex(var(--r));
  }
  69% {
    transform: rotatey(var(--a)) rotatex(1deg) translatex(var(--r));
  }
  70% {
    transform: rotatey(var(--a)) rotatex(-0.5deg) translatex(var(--r));
  }
}

@keyframes fall {
  0%, 71% {
    transform: rotatey(var(--a)) rotatex(0deg) translatex(var(--r));
  }
  14%, 56% {
    transform: rotatey(var(--a)) rotatex(70deg) translatex(var(--r));
  }
  67% {
    transform: rotatey(var(--a)) rotatex(-2deg) translatex(var(--r));
  }
  69% {
    transform: rotatey(var(--a)) rotatex(1deg) translatex(var(--r));
  }
  70% {
    transform: rotatey(var(--a)) rotatex(-0.5deg) translatex(var(--r));
  }
}
</style>

  



</head>

<body >
  <div class="table"></div>
<div class="dominoes">
  <div class="domino">
    <div class="tp"></div>
    <div class="bt"></div>
    <div class="ft"></div>
    <div class="lt"></div>
    <div class="rt"></div>
    <div class="bk"></div>
  </div>
  <div class="domino">
    <div class="tp"></div>
    <div class="bt"></div>
    <div class="ft"></div>
    <div class="lt"></div>
    <div class="rt"></div>
    <div class="bk"></div>
  </div>
  <div class="domino">
    <div class="tp"></div>
    <div class="bt"></div>
    <div class="ft"></div>
    <div class="lt"></div>
    <div class="rt"></div>
    <div class="bk"></div>
  </div>
  <div class="domino">
    <div class="tp"></div>
    <div class="bt"></div>
    <div class="ft"></div>
    <div class="lt"></div>
    <div class="rt"></div>
    <div class="bk"></div>
  </div>
  <div class="domino">
    <div class="tp"></div>
    <div class="bt"></div>
    <div class="ft"></div>
    <div class="lt"></div>
    <div class="rt"></div>
    <div class="bk"></div>
  </div>
  <div class="domino">
    <div class="tp"></div>
    <div class="bt"></div>
    <div class="ft"></div>
    <div class="lt"></div>
    <div class="rt"></div>
    <div class="bk"></div>
  </div>
  <div class="domino">
    <div cla.........完整代码请登录后点击上方下载按钮下载查看

网友评论0