画一个椭圆形带扩散效果波纹展示效果

需求描述

画一个椭圆形带扩散效果波纹展示效果

问题解决

<div class="server">
    <div class="s1"></div>
    <div class="s2"></div>
    <div class="s4"></div>
    <div class="s4 w1"></div>
    <div class="s4 w2"></div>
    <div class="s4 w3"></div>
    <div class="s4 w4"></div>
    <div class="s4 w5"></div>
</div>

.server {
    width: 800px;
    height: 134px;
    margin: 0 auto;
    position: relative;

    .s1 {
        width: 800px;
        height: 134px;
        border-radius: 50% 50%;
        border: 1px dashed #3d86ff;

        position: absolute;
        top: 0;
        left: 0;
    }
    .s2, .s4 {
        width: 160px;
        height: 27px;
        border-radius: 50% 50%;
        border: 1px dashed #3d86ff;
        background-color: white;

        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
    }

    .s4 {
        background-color: unset;
        animation: wave 6s infinite;
    }

    .w1 {
        animation-delay: 1s;
    }

    .w2 {
        animation-delay: 2s;
    }

    .w3 {
        animation-delay: 3s;
    }

    .w4 {
        animation-delay: 4s;
    }

    .w5 {
        animation-delay: 5s;
    }
}


@keyframes wave {
  from {
    opacity: 1;
    width: 160px;
    height: 27px;
  }
  to {
    opacity: 0;
    width: 800px;
    height: 134px;
  }
}