持续创作，加速成长！这是我参与「掘金日新计划 · 6 月更文挑战」的第17天，点击查看活动详情

在电视剧中、在电影中，我们往往会看到时光隧道的画面，今天我们就来模拟一下，只不过做的东西感觉像一个走廊，所以叫做时光走廊。

时光走廊

时光走廊是通过一个入口不断放大，使人肉眼看的距离越来越近而形成的一种视觉效果。

结构

因为需要循环往复的放大，并且需要形成走廊样式，所以需要一些dom，如下：

 <div class="container">
    <div style="--i:0"></div>
    <div style="--i:1"></div>
    <div style="--i:2"></div>
    <div style="--i:3"></div>
    <div style="--i:4"></div>
    <div style="--i:5"></div>
    <div style="--i:6"></div>
    <div style="--i:7"></div>
    <div style="--i:8"></div>
    <div style="--i:9"></div>
</div>

样式

首先，我们需要把单个走廊的样式给画出来，如下：

.container div {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    border: calc(var(--size) * 0.1) solid cyan;
    border-bottom-width: 0;
    -webkit-box-reflect: below 0 linear-gradient(#0002,transparent,transparent);
}

这里添加了倒影的效果，具体效果如下：

接下里，需要给每一个形成走廊的元素加上动画，如下：

.container div {
    animation: _animate 9s linear calc(var(--i) * 2s) infinite; 
}

@keyframes _animate {
    100% {
        transform: scale(10);
    }
}

给每个元素固定的动画延迟，就会形成一个时光走廊。

效果

效果及其代码详情，如下：

总结

时光走廊是通过多个的走廊柱不断的放大形成的，既然通过这种方式形成时光走廊，那么我们可不可以做点别的呢？比如：

1. 可不可以在这个效果的基础上，增加一个小汽车🚗，表示汽车正在运动的效果。
2. 可不可以把这个走廊柱改成我们之前做的隧道入口的形状，那这样是不是就会形成隧道中穿行的效果。

感兴趣的小伙伴，可以试一下。