Question

我在这个圈子里创造了一个涟漪效应。一切看起来都很棒，但我希望这种效果更频繁地发生。当另一个波消失时，另一个波需要很长时间才会出现。我试图提高动画速度，但它并不好看：

这是我到目前为止所做的：

＆＃13;

.pulse {
  width: 300px;
  height: 300px;
  background: #bdebca;
  border: 1px solid #b9e8c9;
  border-radius: 50%;
  z-index: -1;
  text-align: center;
  position: absolute;
  transform: scale(0.1, 0.1);
  animation: ring-1 2s ease-out infinite
}
@keyframes ring-1 {
  0% {
    transform: scale(0.1, 0.1);
    opacity: 0
  }
  50% {
    opacity: 1
  }
  100% {
    transform: scale(1.2, 1.2);
    opacity: 0
  }
}

.ripple-icon .inner {
    background-color: lightblue;
    color: #fff;
    /* animation: pulse 2s infinite; */
}
.icon .inner {
    width: 200px;
    height: 200px;
    text-align: center;
    line-height: 200px;
    display: inline-block;
    border-radius: 100%;
    font-size: 22px;
    color: #fff;
    text-align: center;
    font-weight: 700;
    position: relative;
    top: 50%;
    transform: translateY(-50%);
    box-shadow: 0px 0px 103.74px 10.26px rgba(250, 250, 250, 0.5);
    cursor: pointer;
}
 .icon {
    width: 300px;
    height: 300px;
    border-radius: 100%;
    text-align: center;
    position: absolute;
    top: 50%;
    text-align: center;
    transform: translateY(-50%);
    margin: 0 auto;
    left: 50%;
    margin-left: -150px;
}

＆＃13;

<div class="ripple-icon icon hvr-bounce-in">
      <div class="inner">
     Ripple
      </div>
      <div class="pulse" style="left: 0px; top: 0px;"></div>
    </div>

＆＃13;

Answer 1

这样的东西？添加更多纹波并分别将动画开始延迟0.5s，1s，1.5s和2s。

详细了解动画延迟：

https://developer.mozilla.org/en/docs/Web/CSS/animation-delay
https://css-tricks.com/almanac/properties/a/animation/

.pulse1,
.pulse2,
.pulse3,
.pulse4 {
  width: 300px;
  height: 300px;
  background: #bdebca;
  border: 1px solid #b9e8c9;
  border-radius: 50%;
  z-index: -1;
  text-align: center;
  position: absolute;
  transform: scale(0.1, 0.1);
}
.pulse1 {
  animation: ring-1 2s 0.5s ease-out infinite;
}
.pulse2 {
  animation: ring-1 2s 1s ease-out infinite;
}
.pulse3 {
  animation: ring-1 2s 1.5s ease-out infinite;
}
.pulse4 {
  animation: ring-1 2s 2s ease-out infinite;
}
@keyframes ring-1 {
  0% {
    transform: scale(0.1, 0.1);
    opacity: 0
  }
  50% {
    opacity: 1
  }
  100% {
    transform: scale(1.2, 1.2);
    opacity: 0
  }
}
.ripple-icon .inner {
  background-color: lightblue;
  color: #fff;
  /* animation: pulse 2s infinite; */
}
.icon .inner {
  width: 200px;
  height: 200px;
  text-align: center;
  line-height: 200px;
  display: inline-block;
  border-radius: 100%;
  font-size: 22px;
  color: #fff;
  text-align: center;
  font-weight: 700;
  position: relative;
  top: 50%;
  transform: translateY(-50%);
  box-shadow: 0px 0px 103.74px 10.26px rgba(250, 250, 250, 0.5);
  cursor: pointer;
}
.icon {
  width: 300px;
  height: 300px;
  border-radius: 100%;
  text-align: center;
  position: absolute;
  top: 50%;
  text-align: center;
  transform: translateY(-50%);
  margin: 0 auto;
  left: 50%;
  margin-left: -150px;
}

<div class="ripple-icon icon hvr-bounce-in">
  <div class="inner">
    Ripple
  </div>
  <div class="pulse1" style="left: 0px; top: 0px;"></div>
  <div class="pulse2" style="left: 0px; top: 0px;"></div>
  <div class="pulse3" style="left: 0px; top: 0px;"></div>
  <div class="pulse4" style="left: 0px; top: 0px;"></div>
</div>

Answer 2

在.pulse css中你可以改变动画：ring-1 0.5s缓出无限我已经将速度从2s改为0.5s

增加波纹效应波

2 个答案: