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

本是古典何须时尚 2022-09-10 06:30 174阅读 0赞

> ## 效果演示：   ##
> 
> ![20210906102546553.gif][]

> ## 代码目录： ##

![watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBAamF2YeadjumYs-WLhw_size_20_color_FFFFFF_t_70_g_se_x_16][]

> ## 主要代码实现： ##

### 部分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套][HTML5_100] ###

>   打卡 文章 更新**  40  **/  100天
> 
> 大家可以**点赞、收藏、关注、评论**我啦 、需要完整文件随时联系我或交流哟~！

![在这里插入图片描述][8e6bebf6b7cd409abc03ca5fcb83f826.gif_pic_center]

[20210906102546553.gif]: /images/20220829/3023f30541ca445ebb62d1356b832432.png
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBAamF2YeadjumYs-WLhw_size_20_color_FFFFFF_t_70_g_se_x_16]: /images/20220829/f306c6cb76534d4f9c5bd293b88bc3da.png
[HTML5_100]: https://blog.csdn.net/weixin_39709134/category_11287267.html
[8e6bebf6b7cd409abc03ca5fcb83f826.gif_pic_center]: /images/20220829/fc8d5c55919a4b0a84043154896c09c9.png