效果演示：
代码目录：
主要代码实现：
部分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>
源码获取
查看博主主页或私信博主获取
精彩推荐更新中：
HTML5大作业实战100套
打卡 文章 更新40/ 100天
大家可以点赞、收藏、关注、评论我啦 、需要完整文件随时联系我或交流哟~！
