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

在可视化项目中，波纹效果还是很常用的，比如点动态标记、波纹按钮等，所以接下来我们就来看看它是怎么实现的。

波纹效果

结构

<div class="ripple">
    <span style="--coefficient:0"></span>
    <span style="--coefficient:1"></span>
    <span style="--coefficient:2"></span>
    <span style="--coefficient:3"></span>
    <span style="--coefficient:4"></span>
</div>

n个span标签会有n层波纹效果，其中--coefficient代表动画延迟系数，延迟的时间可以通过延迟系数*延迟常量得到。

样式

首先，我们需要设置波纹的范围，也就是说我们需要给它定义宽高，如下：

.ripple {
    width: 20rem;
    height: 20rem;
    position: relative;
    --color: red;
}

其次，我们需要给每层波纹设置样式，如下：

.ripple span {
    display: block;
    border-radius: 50%;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    background-color: var(--color);
    --delay: calc(var(--coefficient) * 1s);
    animation: _spread 5s linear var(--delay) infinite;
}

--delay就是延迟时间，它是由延迟系数--coefficient和延迟常量1s相乘得到的。波纹的宽高无论是什么，都需要波纹放在波纹容器的中央，这里我们需要做上下垂直居中。

最后，就是动画效果了，我们需要每层波纹在变化时长内完成宽高从0到100%、透明度从1到0的变化，如下：

@keyframes _spread {
    0% {
        width: 0;
        height: 0;
        opacity: 1;
    }

    100% {
        width: 100%;
        height: 100%;
        opacity: 0;
    }
}

效果

本来想贴张图的，但是现在有了代码片段功能，是真的方便，所以有想看效果和代码详情的可以去代码片段中查看。

总结

走到终点的路不止一条，同样实现同一效果的方式也不止一种。我想大家在讨论的过程中，能把代码更精简，能把效果做的更流畅，更完美，这样才是有意义的，所以大家如果有更好的实现方式，请在评论区展示出来吧。