當前位置：首頁 > 前端技术 > HTML >内容正文

HTML

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

發布時間：2025/3/12 HTML 23 豆豆

生活随笔收集整理的這篇文章主要介紹了 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="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="cubeShadow"></div><div class="cubeShadow"></div></div></div></body></html>

源碼獲取

查看博主主頁或私信博主獲取

精彩推薦更新中：

HTML5大作業實戰100套

??打卡文章更新? 40??/? 100天

大家可以點贊、收藏、關注、評論我啦、需要完整文件隨時聯系我或交流喲~！

總結

以上是生活随笔為你收集整理的HTML+CSS+JS实现 ❤️3D方块弹跳动画特效❤️的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。

上一篇： HTML+CSS+JS实现 ❤️ htm
下一篇：《零基础》MySQL 正则表达式(二十一