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

最新推荐文章于 2024-02-11 10:47:26 发布

cnmone

最新推荐文章于 2024-02-11 10:47:26 发布

阅读量456

点赞数

分类专栏： css 文章标签： css波纹椭圆波纹椭圆扩散

本文链接：https://blog.youkuaiyun.com/weixin_44539392/article/details/124291870

版权

css 专栏收录该内容

6 篇文章

订阅专栏

本文介绍如何使用HTML、CSS和JavaScript实现一个带有扩散效果的椭圆形波纹展示，通过关键帧动画控制从小到大的扩散过程，适合前端开发者了解动态视觉效果的实现技巧。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

需求描述

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

问题解决

<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;
  }
}