HTML+CSS+JS实现 ❤️3D方块弹跳动画特效❤️

效果演示：

代码目录：

主要代码实现：

部分CSS样式：

*,
*::before,
*::after {padding: 0;margin: 0 auto;box-sizing: border-box;transform-style: preserve-3d;
}body {background-color: black;min-height: 100vh;display: flex;justify-content: center;align-items: center;font-size: 50px;perspective: 16em;
}.scene {position: relative;-webkit-animation: sceneRotate 30s infinite linear;animation: sceneRotate 30s infinite linear;
}@-webkit-keyframes sceneRotate {to {transform: rotateY(360deg);}
}@keyframes sceneRotate {to {transform: rotateY(360deg);}
}.cube {position: absolute;width: 2em;height: 2em;-webkit-animation: cubeBounce 4s infinite ease-out, cubeLeft 4s infinite linear, cubeHeight 4s infinite ease-out;animation: cubeBounce 4s infinite ease-out, cubeLeft 4s infinite linear, cubeHeight 4s infinite ease-out;
}.cube:nth-child(2) {-webkit-animation-delay: -2s;animation-delay: -2s;
}.cube:nth-child(2)>* {background-color: lightgreen;
}@-webkit-keyframes cubeBounce {0%,40% {bottom: calc(-3em + 2px);transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg);}70% {bottom: 1em;-webkit-animation-timing-function: ease-in;animation-timing-function: ease-in;}100% {bottom: calc(-3em + 2px);transform: rotateX(90deg) rotateY(180deg) rotateZ(180deg);}
}@keyframes cubeBounce {0%,40% {bottom: calc(-3em + 2px);transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg);}70% {bottom: 1em;-webkit-animation-timing-function: ease-in;animation-timing-function: ease-in;}100% {bottom: calc(-3em + 2px);transform: rotateX(90deg) rotateY(180deg) rotateZ(180deg);}
}@-webkit-keyframes cubeHeight {0%,10%,30%,40%,100% {height: 2em;}5%,35% {height: 1.5em;-webkit-animation-timing-function: ease-in;animation-timing-function: ease-in;}
}@keyframes cubeHeight {0%,10%,30%,40%,100% {height: 2em;}5%,35% {height: 1.5em;-webkit-animation-timing-function: ease-in;animation-timing-function: ease-in;}
}@-webkit-keyframes cubeLeft {0%,100% {left: -4em;}40% {left: 2em;-webkit-animation-timing-function: ease-in;animation-timing-function: ease-in;}
}@keyframes cubeLeft {0%,100% {left: -4em;}40% {left: 2em;-webkit-animation-timing-function: ease-in;animation-timing-function: ease-in;}
}.cube>* {position: absolute;width: 100%;height: 100%;background-color: lightblue;opacity: 0.9;box-shadow: 0 0 1em #000 inset;
}.cube .front {transform: translateZ(1em);
}.cube .right {transform: rotateY(90deg) translateZ(1em);
}.cube .back {transform: rotateY(180deg) translateZ(1em);
}.cube .left {transform: rotateY(270deg) translateZ(1em);
}.cube .top {width: 2em;height: 2em;background-image: linear-gradient(90deg, #0000, #0009 25% 75%, #0000);background-size: 4em 2em;background-repeat: no-repeat;transform: rotateX(90deg) translateZ(1em);-webkit-animation: topShadow 4s infinite linear;animation: topShadow 4s infinite linear;-webkit-animation-delay: inherit;animation-delay: inherit;
}@-webkit-keyframes topShadow {0%,10% {background-position-x: 2em;}40%,100% {background-position-x: -6em;}
}@keyframes topShadow {0%,10% {background-position-x: 2em;}40%,100% {background-position-x: -6em;}
}.cube .bottom {width: 2em;height: 2em;bottom: 0;transform: rotateX(270deg) translateZ(1em);
}.cubeShadow {position: absolute;top: 50%;width: 2em;height: 2em;background-color: #0007;box-shadow: 0 0 1em #000;-webkit-animation: cubeShadow 4s infinite ease-out, shadowLeft 4s infinite linear;animation: cubeShadow 4s infinite ease-out, shadowLeft 4s infinite linear;
}.cubeShadow:nth-child(2) {-webkit-animation-delay: -2s;animation-delay: -2s;
}@-webkit-keyframes cubeShadow {0%,40% {opacity: 0.8;transform: translateY(-50%) rotate(90deg) translateZ(1px) scale(1);}70% {opacity: 0.3;transform: translateY(-50%) rotate(30deg) translateZ(1px) scale(2);-webkit-animation-timing-function: ease-in;animation-timing-function: ease-in;}

HTML代码 :

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><title> Tikal Demo</title><link rel="stylesheet" href="css/style.css"></head><body><div class="scene"><!--   <div class="ball"></div> --><div class="cube"><div class="top"></div><div class="front"></div><div class="back"></div><div class="right"></div><div class="left"></div><div class="bottom"></div></div><div class="cube"><div class="top"></div><div class="front"></div><div class="back"></div><div class="right"></div><div class="left"></div><div class="bottom"></div></div><div class="floor"><!--     <div class="ballShadow"></div> --><div class="cubeShadow"></div><div class="cubeShadow"></div></div></div></body></html>