使用css实现圆形波浪效果图

在移动端经常看到一些 圆 形波浪图来显示金额，刚 开始 我认为这种效果只能用canva S写 的，后来发现用css也可以。

原理：我们都 知道 让块元素的 border-radius:50% 会变成圆形，如果少于50%呢，其实就变成不规则的圆形。我们可以 利用 这个特征，用 伪类 加上transform动画来实现波浪效果。

先看一下效果图：

//css代码

.wave {
        pos IT ion: relative; 
    width: 200px;
    h ei ght: 200px;
    background: @color;
    border: 5px solid  # 76daff;
    border-radius: 50%;
    overflow: hidden;
}
.wave-box :: before,
.wave-box: :after  {
      content: '';
      position: absolute;
      top: 0;
      left: 50%;
      width: 400px;
      height: 400px;
      border-radius: 45%;
      - webkit  -t ransform: translate(-50%, -70%);
      transform: translate(-50%, -70%);
      background: rgba(255, 255, 255, 0.5);
      -webkit-animation: rotate 10s linear infinite;
      animation: rotate 10s linear infinite;
      z -i ndex: 10;
}
@keyfr am es rotate {
  50% {
            -webkit-transform: translate(-50%, -75%) rotate(180 deg );
            transform: translate(-50%, -75%) rotate(180deg);
  }
  100% {
            -webkit-transform: translate(-50%, -70%) rotate(180deg);
            transform: translate(-50%, -70%) rotate(180deg);
  }
}
// 或者 使用预编译语言更方便，这里使用less
.wave(@width; @height; @color) {
    position: relative; 
    width: @width;
    height: @height;
    background: @color;
    border: 5px solid @color;
    border-radius: 50%;
    overflow: hidden;
    &am p; ::before,
    &::after {
        content: '';
        position: absolute;
        top: 0;
        left: 50%;
        width: @width * 2;
        height: @height * 2;
        border-radius: 45%;
        transform: translate(-50%, -70%);
        background: rgba(255,255,255,0.5);
        animation: rotate 10s linear infinite;
        z-index: 10;
    }
    &::after {
        border-radius: 47%;
        background: rgba(255,255,255,0.5);
        animation: rotate 10s linear -5s infinite;
        z-index: 20;
    }
}
//调用
.wave-box {
    .wave(200px; 200px; #76daff);
}
<!-- 页面上调用 -->
<div class="wave-box"></div>

总结

以上所述是小编给大家介绍的使用css实现圆形波浪效果图 ，@R_ 512 _384@，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对网站的支持！

总结

以上是 为你收集整理的 使用css实现圆形波浪效果图 全部内容，希望文章能够帮你解决 使用css实现圆形波浪效果图 所遇到的问题。

如果觉得 网站内容还不错， 推荐好友。

查看更多关于使用css实现圆形波浪效果图的详细内容...