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>

源码获取

查看博主主页或私信博主获取

精彩推荐更新中：

HTML5大作业实战100套

  打卡 文章 更新 40 /  100天

大家可以点赞、收藏、关注、评论我啦 、需要完整文件随时联系我或交流哟~！