css布局实现三维立体多彩箱子打开跳动动画效果代码
代码语言:html
所属分类:动画
代码描述:css布局实现一排三维立体多彩箱子依次打开后跳动循环动画效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <style> *, *::before, *::after { padding: 0; margin: 0 auto; box-sizing: border-box; } body { background-color: #000; min-height: 100vh; display: grid; place-items: center; perspective: 1000px; font-size: 50px; overflow: hidden; } body *:not(:empty) { transform-style: preserve-3d; } .matryoshBox { position: relative; transform: translateX(-3.5em) rotateX(60deg) rotateZ(60deg); } .matryoshBox .box { position: absolute; left: 0; width: 1em; height: 1em; -webkit-animation: boxMove 20s var(--delay) infinite linear; animation: boxMove 20s var(--delay) infinite linear; } @-webkit-keyframes boxMove { 0% { transform: translate(-50%, calc(-50% + 0em)) scale(0.75); } 10% { transform: translate(-50%, calc(-50% - 2em)) scale(0.75); } 20% { transform: translate(-50%, calc(-50% + 0em)) scale(1); } 100% { transform: translate(-50%, calc(-50% - 16em)) scale(1); } } @keyframes boxMove { 0% { transform: translate(-50%, calc(-50% + 0em)) scale(0.75); } 10% { transform: translate(-50%, calc(-50% - 2em)) scale(0.75); } 20% { transform: translate(-50%, calc(-50% + 0em)) scale(1); } 100% { transform: translate(-50%, calc(-50% - 16em)) scale(1); } } .matryoshBox .box:nth-child(1) { --color: #ffa602; --delay: 0s; } .matryoshBox .box:nth-child(2) { --color: #ff6362; --delay: -4s; } .matryoshBox .box:nth-child(3) { --color: #bc5090; --delay: -8s; } .matryoshBox .box:nth-child(4) { --color: #58508d; --delay: -12s; } .matryoshBox .box:nth-child(5) { --color: #00405c; --delay: -16s; } .matryoshBox .bottom, .matryoshBox .top { position: absolute; width: 1em; height: 1em; } @-webkit-keyframes boxColor { 0%, 60% { background-color: var(--color); } 100% { background-color: #000; } } @keyframes boxColor { 0%, 60% { background-color: var(--color); } 100% { background-color: #000; } } .matryoshBox .bottom { -webkit-animation: boxBounce 20s var(--delay) infinite ease-out, boxColor 20s var(--delay) infinite linear; animation: boxBounce 20s var(--delay) infinite ease-out, boxColor 20s var(--delay) infinite linear; } @-webkit-keyframes boxBounce { 0%, 10% { transform: translateZ(0em) rotateX(180deg); -webkit-animation-timing-function: cubic-bezier(0, 0, 0, 1); animation-timing-function: cubic-bezier(0, 0, 0, 1); } 20%, 100% { transform: translateZ(0em) rotateX(180deg); -webkit-animation-timing-function: cubic-bezier(0, 0, 0, 1); animation-timing-function: cubic-bezier(0, 0, 0, 1); } 15% { transform: translateZ(2.5em) rotateX(180deg); -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in; } } @keyframes boxBounce { 0%, 10% { transform: translateZ(0em) rotateX(180deg); -webkit-animation-timing-function: cubic-bezier(0, 0, 0, 1); animation-timing-function: cubic-bezier(0, 0, 0, 1); } 20%, 100% { transform: translateZ(0em) rotateX(180deg); -webkit-animation-timing-function: cubic-bezier(0, 0, 0, 1); animation-timing-function: cubic-bezier(0, 0, 0, 1); } 15% { transform: translateZ(2.5em) rotateX(180deg); -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in; } } .matryoshBox .bottom .side { position: absolute; bottom: 50%; width: 1em; height: 0.5em; background-color: inherit; background-image: radial-gradient(at top, #0000, 75%, #0004); box-shadow: 0 0 0.2em #0004 inset; transform: rotateX(90deg) rotateY(var(--sideAngle, 0deg)) translateZ(0.5em); transform-origin: bottom; -webkit-animation: sideHeight 20s var(--delay) infinite linear; animation: sideHeight 20s var(--delay) infinite linear; } @-webkit-keyframes sideHeight { 0%, 10% { height: 0.375em; } 20%, 100% { height: 0.5em; } } @keyframes sideHeight { 0%, 10% { height: 0.375em; } 20%, 100% { height: 0.5em; } } .matryoshBox .bottom .side:nth-child(1) { --sideAngle: 0deg; } .matryoshBox .bottom .side:nth-child(2) { --sideAngle: 90deg; } .matryoshBox .bottom .side:nth-child(3) { --sideAngle: 180deg; } .matryoshBox .bottom .side:nth-child(4) { --sideAngle: 270deg; } .matryoshBox .top { bottom: 100%; background-image: radial-gradient(at top, #0000, 75%, #0006); transform-origin: bottom; -webkit-animation: boxOpen 20s var(--delay) infinite ease-in-out, boxColor 20s var(--delay) infinite linear; animation: boxOpen 20s var(--delay) infinite ease-in-out, boxColor 20s var(--delay) infinite linear; } @-webkit-keyframes boxOpen { 0%, 10% { transform: rotateX(90deg) translateZ(0.375em); -webkit-animation-timing-function: linear; animation-timing-function: linear; } 20%, 25%, 50%, 100% { transform: rotateX(90deg) translateZ(0.5em); -webkit-animation-timing-function: ease-in-out; animation-timing-function: ease-in-out; } 32% { transform: rotateX(-30deg) translateZ(0.5em); } } @keyframes boxOpen { 0%, 10% { transform: rotateX(90deg) translateZ(0.375em); -webkit-animation-timing-function: linear; animation-timing-function: linear; } 20%, 25%, 50%, 100% { transform: rotateX(90deg) translateZ(0.5em); -webkit-animation-timing-funct.........完整代码请登录后点击上方下载按钮下载查看
网友评论0