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

最近在网上看到一个非常酷的创意效果，自己也着手实现一下，接下来就分享给大家。

漫步前行

给人一种慢慢前行的感觉，像在漫步，像在爬楼梯，给人一种很舒服的感觉。

结构

<div class="mirror"></div>

样式

首先，我们需要准备一个镜面的效果，这里需要注意是镜面宽度要足够宽，如下：

.mirror{
    --size:10rem;
    width: 100%;
    height: var(--size);
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    -webkit-box-reflect: below 0.1rem linear-gradient(transparent, rgba(0, 0, 0, .3));
}

其次，我们需要准备一个行走的方块，并给它一个不错的样式，当然你也可以换成其它图案，可以弄的更炫酷一点，如下：

.mirror::before {
    content: '';
    width: var(--size);
    height: var(--size);
    position: absolute;
    background: cyan;
    box-shadow: 0 0 0.5rem cyan,
        0 0 2.5rem cyan,
        0 0 5rem cyan,
        0 0 10rem cyan;
    transform-origin: bottom right;
}

最后，需要给方块一个动画。当方块旋转的同时，位移到原来的位置，跟人一种不停行走的视觉效果。

.mirror::before {
    animation: _animateMove 1s ease-in infinite;
}
@keyframes _animateMove {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform:translateX(calc(var(--size) * -1)) rotate(90deg);
    }
}

效果

效果及代码详情，如下：

总结

这个效果需要注意的是：

1. 镜面的宽度要足够长，一定要比方块的宽度宽，最好是其父级元素的宽度。
2. 方块的动画要配合旋转和位置的效果来体现出一直行走的视觉效果。

不过，小伙伴如果有时间，可以在改变一下创意，比如把这个方块变成一个人的腿，这样就可以更形象的体现人行走的效果。我们还可以把镜面层变成一个个的阶梯，这样就体现一种人走在楼梯上的效果。