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

代码语言：html

所属分类：动画

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