css实现一个三维金字塔堆叠动画效果代码
代码语言:html
所属分类:三维
代码描述:css实现一个三维金字塔堆叠动画效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <style> body { overflow: hidden; margin: 0; height: 100vh; perspective: 40em; perspective-origin: 50% calc(50% - 4.59619em); background: #000; } div, :before, :after { position: absolute; top: 50%; left: 50%; transform-style: preserve-3d; } .a3d { margin-top: 0.84342em; -webkit-animation: ani 10s linear infinite; animation: ani 10s linear infinite; } @-webkit-keyframes ani { 80% { transform: rotateY(1turn); -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out; } 100% { transform: rotateY(1turn) translate(calc(-50vw - 26em)); } } @keyframes ani { 80% { transform: rotateY(1turn); -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out; } 100% { transform: rotateY(1turn) translate(calc(-50vw - 26em)); } } .s3d:nth-child(1) { transform: translateY(calc(-50vh - 9.19239em)); -webkit-animation: fall-1 10s cubic-bezier(0.68, 0, 0.265, 1.125) infinite; animation: fall-1 10s cubic-bezier(0.68, 0, 0.265, 1.125) infinite; } .s3d:nth-child(1) .s2d:nth-child(-n + 4) { -webkit-clip-path: url(#c1); clip-path: url(#c1); } .s3d:nth-child(1) .s2d:nth-child(-n + 4):after { background-image: linear-gradient(90deg, #ff00aa, #800055, #800055, #800055, #ff00aa); -webkit-animation: fill-1 10s ease-in infinite, shade 10s linear infinite; animation: fill-1 10s ease-in infinite, shade 10s linear infinite; } .s3d:nth-child(1) .s2d:nth-child(5) { margin: 0em; width: 0em; height: 0em; transform: translateY(-5.43961em) rotateX(90deg); } .s3d:nth-child(1) .s2d:nth-child(5):before { background: #ff80d5; -webkit-animation: fill-1 10s infinite; animation: fill-1 10s infinite; } .s3d:nth-child(1) .s2d:nth-child(5):after { -webkit-animation: shadow-1 10s infinite; animation: shadow-1 10s infinite; } @-webkit-keyframes fall-1 { 40%, 100% { transform: none; } } @keyframes fall-1 { 40%, 100% { transform: none; } } @-webkit-keyframes fill-1 { 0%, 72% { opacity: .001; } 80%, 100% { opacity: .999; } } @keyframes fill-1 { 0%, 72% { opacity: .001; } 80%, 100% { opacity: .999; } } @-webkit-keyframes shadow-1 { 0%, 36% { opacity: .001; transform: scale(0.1); } 44%, 100% { opacity: .5; transform: scale(0.98); } } @keyframes shadow-1 { 0%, 36% { opacity: .001; transform: scale(0.1); } 44%, 100% { opacity: .5; transform: scale(0.98); } } .s3d:nth-child(2) { transform: translateY(calc(-50vh - 9.19239em)); -webkit-animation: fall-2 10s cubic-bezier(0.68, 0, 0.265, 1.125) infinite; animation: fall-2 10s cubic-bezier(0.68, 0, 0.265, 1.125) infinite; } .s3d:nth-child(2) .s2d:nth-child(-n + 4) { -webkit-clip-path: url(#c2); clip-path: url(#c2); } .s3d:nth-child(2) .s2d:nth-child(-n + 4):after { background-image: linear-gradient(90deg, #ffaa00, #805500, #805500, #805500, #ffaa00); -webkit-animation: fill-2 10s ease-in infinite, shade 10s linear infinite; animation: fill-2 10s ease-in infinite, shade 10s linear infinite; } .s3d:nth-child(2) .s2d:nth-child(5) { margin: -1.43em; width: 2.86em; height: 2.86em; transform: translateY(-3.41729em) rotateX(90deg); } .s3d:nth-child(2) .s2d:nth-child(5):before { background: #ffd580; -webkit-animation: fill-2 10s infinite; animation: fill-2 10s infinite; } .s3d:nth-child(2) .s2d:nth-child(5):after { -webkit-animation: shadow-2 10s infinite; animation: shadow-2 10s infinite; } @-webkit-keyframes fall-2 { 32%, 100% { transform: none; } } @keyframes fall-2 { 32%, 100% { transform: none; } } @-webkit-keyframes fill-2 { 0%, 64% { opacity: .001; } 72%, 100% { opacity: .999; } } @keyframes fill-2 { 0%, 64% { opacity: .001; } 72%, 100% { opacity: .999; } } @-webkit-keyframes shadow-2 { 0%, 28% { opacity: .001; transform: scale(0.1); } 36%, 100% { opacity: .5; transform: scale(0.98); } } @keyframes shadow-2 { 0%, 28% { opacity: .001; transform: scale(0.1); } 36%, 100% { opacity: .5; transform: scale(0.98); } } .s3d:nth-child(3) { transform: translateY(calc(-50vh - 9.19239em)); -webkit-animation: fall-3 10s cubic-bezier(0.68, 0, 0.265, 1.125) infinite; animation: fall-3 10s cubic-bezier(0.68, 0, 0.265, 1.125) infinite; } .s3d:nth-child(3) .s2d:nth-child(-n + 4) { -webkit-clip-path: url(#c3); clip-path: url(#c3); } .s3d:nth-child(3) .s2d:nth-child(-n + 4):after { background-image: linear-gradient(90deg, #aaff00, #558000, #558000, #558000, #aaff00); -webkit-animation: fill-3 10s ease-in infinite, shade 10s linear infinite; animation: fill-3 10s ease-in infinite, shade 10s linear infinite; } .s3d:nth-child(3) .s2d:nth-child(5) { margin: -2.73em; width: 5.46em; height: 5.46em; transform: translateY(-1.57881em) rotateX(90deg); } .s3d:nth-child(3) .s2d:nth-child(5):before { background: #d5ff80; -webkit-animation: fill-3 10s infinite; animation: fill-3 10s infinite; } .s3d:nth-child(3) .s2d:nth-child(5):after { -webkit-animation: shadow-3 10s infinite; animation: shadow-3 10s infinite; } @-webkit-keyframes fall-3 { 24%, 100% { transform: none; } } @keyframes fall-3 { 24%, 100% { transform: none; } } @-webkit-keyframes fill-3 { 0%, 56% { opacity: .001; } 64%, 100% { opacity: .999; } } @keyframes fill-3 { 0%, 56% { opacity: .001; } 64%, 100% { opacity: .999; } } @-webkit-keyframes shadow-3 { 0%, 20% { opacity: .001; transform: scale(0.1); } 28%, 100% { opacity: .5; transform: scale(0.98); } } @keyframes shadow-3 { 0%, 20% { opacity: .001; transform: scale(0.1); } 28%, 100% { opacity: .5; transform: scale(0.98); } } .s3d:nth-child(4) { transform: translateY(calc(-50vh - 9.19239em)); -webkit-animation: fall-4 10s cubic-bezier(0.68, 0, 0.265, 1.125) infinite; animation: fall-4 10s cubic-bezier(0.68, 0, 0.265, 1.125) infinite; } .s3d:nth-child(4) .s2d:nth-child(-n + 4) { -webkit-clip-path: url(#c4); clip-path: url(#c4); } .s3d:nth-child(4) .s2d:nth-child(-n + 4):after { background-image: linear-gradient(90deg, #00aaff, #005580, #005580, #005580, #00aaff); -webkit-animation: fill-4 10s ease-in infinite, shade 10s linear infinite; animation: fill-4 10s ease-in infinite, shade 10s linear infinite; } .s3d:nth-child(4) .s2d:nth-child(5) { margin: -4.03em; width: 8.06em; height: 8.06em; transform: translateY(0.25967em) rotateX(90deg); } .s3d:nth-child(4) .s2d:nth-child(5):before { background: #80d5ff; -webkit-animation: fill-4 10s infinite; animation: fill-4 10s infinite; } .s3d:nth-child(4) .s2d:nth-child(5):after { -webkit-animation: shadow-4 10s infinite; anima.........完整代码请登录后点击上方下载按钮下载查看
网友评论0