波浪悬浮球

实现

HTML

  <div class="wrapper">
    <div class="container">
      <div class="wave" />
      <div class="wave-mask" />
    </div>
  </div>

SCSS

点击查看代码

.wrapper {
  position: relative;
}
.container {
  width: 100px;
  height: 100px;
  border: 3px solid rgb(134, 223, 134);
  border-radius: 50%;
  background-color: #fff;
  padding: 5px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  overflow: hidden;
  .wave {
    width: 100px;
    height: 100px;
    border-radius: 50%;
    background: linear-gradient(-180deg, #aaff80 13%, #67c23a 91%);
    position: relative;
  }
  .wave-mask {
    width: 200px;
    height: 200px;
    position: absolute;
    top: 0;
    left: 50%;
    border-radius: 40%;
    background-color: rgba(255, 255, 255, 0.9);
    transform: translate(-50%, -70%) rotate(0);
    animation: rotate 5s linear 0s infinite;
    z-index: 20;
  }
}

@keyframes rotate {
  from {
    transform: translate(-50%, -70%) rotate(180deg);
  }
  to {
    transform: translate(-50%, -70%) rotate(360deg);
  }
}

效果