HTML+CSS+JS实现 ❤️酷炫的时光隧道旅行动特效❤️

心已赠人 2022-09-10 03:14 110阅读 0赞

> ##   效果演示： ##

![20210903203454115.gif][]

> ##    代码目录： ##

![watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBAamF2YeadjumYs-WLhw_size_20_color_FFFFFF_t_70_g_se_x_16][]

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

### css样式： ###

html,
    body {
        width: 100%;
        height: 100%;
        overflow: hidden;
    }
    
    body {
        background: #000;
        text-align: center;
    }
    
    body::before {
        content: "";
        display: inline-block;
        height: 100%;
        vertical-align: middle;
    }
    
    .scene {
        position: relative;
        display: inline-block;
        vertical-align: middle;
        perspective: 15px;
        perspective-origin: 50% 50%;
    }
    
    .wrap {
        position: absolute;
        width: 1000px;
        height: 1000px;
        left: -500px;
        top: -500px;
        transform-style: preserve-3d;
        animation: move 12s infinite linear;
        animation-fill-mode: forwards;
    }
    
    .wrap:nth-child(2) {
        animation: move 12s infinite linear;
        animation-delay: 6s;
    }
    
    .wall {
        width: 100%;
        height: 100%;
        position: absolute;
        background: url(../img/sg.jpg);
        background-size: cover;
        opacity: 0;
        animation: fade 12s infinite linear;
    }
    
    .wrap:nth-child(2) .wall {
        animation-delay: 6s;
    }
    
    .wall-right {
        transform: rotateY(90deg) translateZ(500px);
    }
    
    .wall-left {
        transform: rotateY(-90deg) translateZ(500px);
    }
    
    .wall-top {
        transform: rotateX(90deg) translateZ(500px);
    }
    
    .wall-bottom {
        transform: rotateX(-90deg) translateZ(500px);
    }
    
    .wall-back {
        transform: rotateX(180deg) translateZ(500px);
    }
    
    @keyframes fade {
        0% {
            opacity: 0;
        }
        25% {
            opacity: 1;
        }
        75% {
            opacity: 1;
        }
        100% {
            opacity: 0;
        }
    }
    
    @keyframes move {
        0% {
            transform: translateZ(-500px) rotate(0deg);
        }
        100% {
            transform: translateZ(500px) rotate(0deg);
        }
    }

### html代码 : ###

<!DOCTYPE html>
    <html lang="en">
    
    <head>
        <meta charset="UTF-8">
        <title>Tunnel travel using CSS perspective</title>
    
        <link rel="stylesheet" href="css/style.css">
    
    </head>
    
    <body>
    
        <div class="scene">
            <div class="wrap">
                <div class="wall wall-right"></div>
                <div class="wall wall-left"></div>
                <div class="wall wall-top"></div>
                <div class="wall wall-bottom"></div>
                <div class="wall wall-back"></div>
            </div>
            <div class="wrap">
                <div class="wall wall-right"></div>
                <div class="wall wall-left"></div>
                <div class="wall wall-top"></div>
                <div class="wall wall-bottom"></div>
                <div class="wall wall-back"></div>
            </div>
        </div>
    
    
    </body>
    
    </html>

图片也可以替换成自己喜欢的样子。

> ## 源码获取 ##
> 
> 精彩推荐更新中：
> 
> ### [HTML5大作业实战100套][HTML5_100] ###

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

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

[20210903203454115.gif]: /images/20220829/62d62395026f4ce5ad86b46ac6aed67f.png
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBAamF2YeadjumYs-WLhw_size_20_color_FFFFFF_t_70_g_se_x_16]: /images/20220829/27d5fc4ae22a44fe89125cd91665abe6.png
[HTML5_100]: https://blog.csdn.net/weixin_39709134/category_11287267.html
[8e6bebf6b7cd409abc03ca5fcb83f826.gif_pic_center]: /images/20220829/e89a9f7507db483194547597640a86bb.png