css实现三维多米诺骨牌动画效果代码
代码语言: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-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