我如何隐藏动画圆纹波效果的溢出

Question

我正在尝试在左下角获得连锁反应。我想看到的是仅在英雄区域(100％的视网膜(显示的连锁反应，而不是溢出到另一部分。

我认为我可以用"溢出：隐藏"隐藏它，但我似乎错了。

我希望对我想要什么的解释很清楚。让我知道我是否不是。

新的前端dev

.hero-body {
  background: #3399ff;
  height: 100%;
}
.circle {
  position: absolute;
  border-radius: 0 50% 0 0;
  background: white;
  animation: ripple 15s infinite;
  box-shadow: 0px 0px 1px 0px #508fb9;
}
.small {
  width: 200px;
  height: 200px;
  left: -100px;
  bottom: -100px;
}
.medium {
  width: 400px;
  height: 400px;
  left: -200px;
  bottom: -200px;
}
.large {
  width: 600px;
  height: 600px;
  left: -300px;
  bottom: -300px;
}
.xlarge {
  width: 800px;
  height: 800px;
  left: -400px;
  bottom: -400px;
}
.xxlarge {
  width: 1000px;
  height: 1000px;
  left: -500px;
  bottom: -500px;
}
.shade1 {
  opacity: 0.2;
}
.shade2 {
  opacity: 0.5;
}
.shade3 {
  opacity: 0.7;
}
.shade4 {
  opacity: 0.8;
}
.shade5 {
  opacity: 0.9;
}
@keyframes ripple {
  0% {
    transform: scale(0.8);
  }
  50% {
    transform: scale(1.2);
  }
  100% {
    transform: scale(0.8);
  }
}

<div class="row justify-content-center">
  <div class='ripple-background'>
    <div class='circle xxlarge shade1'></div>
    <div class='circle xlarge shade2'></div>
    <div class='circle large shade3'></div>
    <div class='circle mediun shade4'></div>
    <div class='circle small shade5'></div>
  </div>
</div>

Answer 1

使用 position: fixed;

body {
    background: #3399ff;
    height: 100%;
    width: 100%;
    position: fixed;
}
.circle {
  position: absolute;
  border-radius: 0 50% 0 0;
  background: white;
  animation: ripple 15s infinite;
  box-shadow: 0px 0px 1px 0px #508fb9;
}
.small {
  width: 200px;
  height: 200px;
  left: -100px;
  bottom: -100px;
}
.medium {
  width: 400px;
  height: 400px;
  left: -200px;
  bottom: -200px;
}
.large {
  width: 600px;
  height: 600px;
  left: -300px;
  bottom: -300px;
}
.xlarge {
  width: 800px;
  height: 800px;
  left: -400px;
  bottom: -400px;
}
.xxlarge {
  width: 1000px;
  height: 1000px;
  left: -500px;
  bottom: -500px;
}
.shade1 {
  opacity: 0.2;
}
.shade2 {
  opacity: 0.5;
}
.shade3 {
  opacity: 0.7;
}
.shade4 {
  opacity: 0.8;
}
.shade5 {
  opacity: 0.9;
}
@keyframes ripple {
  0% {
    transform: scale(0.8);
  }
  50% {
    transform: scale(1.2);
  }
  100% {
    transform: scale(0.8);
  }
}

<div class="row justify-content-center">
  <div class='ripple-background'>
    <div class='circle xxlarge shade1'></div>
    <div class='circle xlarge shade2'></div>
    <div class='circle large shade3'></div>
    <div class='circle mediun shade4'></div>
    <div class='circle small shade5'></div>
  </div>
</div>