为缩放圆圈动画添加边框

Question

我正在实现类似于以下的wave动画：

我想为每个透明波浪圈设置2px边框-实现此效果的最佳方法是什么（最好没有宽/高动画）？

当前，我正在为box-shadow属性设置动画，并且似乎我无法（？）使用多个阴影来模仿边框，只要我需要它们是半透明的即可。另外，由于scale也将缩放，因此我无法使用border-width。我在这里看到的唯一方法是为每个width/height元素的实际<i>设置动画，但是我认为该动画在所有设备上都不会平滑（？）

:root {
  --size: 6px;
  --duration: 1000ms;
}

body {
  background: #333;
}

.blinker {
  left: 50%;
  top: 50%;
  transform: translateX(-50%) translateY(-50%);
  position: absolute;
  z-index: 3;
  background: #fdfdf9;
  width: var(--size);
  height: var(--size);
  border-radius: 50%;
}

.blinker i {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translateX(-50%) translateY(-50%);
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  opacity: 1;
}

.blinker i:nth-child(1) {
  animation: blinkBoxShadow var(--duration) ease-out infinite;
  display: block;
  border: 1px solid white;
}

@keyframes blinkBoxShadow {
  from {
    box-shadow: 0 0 0 30px trasparent;
    background: transparent;
    opacity: 1;
  }
  to {
    box-shadow: 0 0 0 30px rgba(255, 255, 255, 0.7);
    background: rgba(255, 255, 255, 0.7);
    opacity: 0;
  }
}

.blinker i:nth-child(2) {
  transform: translateX(-50%) translateY(-50%);
  width: 61px;
  height: 61px;
  animation: blinkBoxShadow2 var(--duration) ease-out infinite;
  animation-delay: calc(var(--duration) - 200ms);
}

@keyframes blinkBoxShadow2 {
  from {
    box-shadow: 0 0 0 0px rgba(255, 179, 117, 0.7);
    opacity: 0;
  }
  50% {
    opacity: 0.5;
  }
  to {
    box-shadow: 0 0 0 50px rgba(255, 179, 117, 0);
    opacity: 0;
  }
}

.blinker i:nth-child(3) {
  background: white;
}

<div class="blinker">
  <i></i>
  <i></i>
  <i></i>
</div>

Answer 1

如果我正确理解-您不能使用box-shadow属性，因为它是不透明的吗？

如果是，则可以使用rgba（）函数设置阴影的颜色，其中最后一个参数是alpha（透明度）通道值。当您在搜索栏中输入“脉冲”时，您会看到它在CodePen项目上的完成情况。

如果没有，那么如果您使用JS来设置宽度/高度的动画，我认为在大多数移动设备上这不是效率问题。

Answer 2

我认为边界应该起作用。删除阴影，并对其宽度和高度进行动画处理。

请参见下面的代码段

:root {
  --size: 6px;
  --duration: 1000ms;
}

body {
  background: #333;
}

.blinker {
  left: 50%;
  top: 50%;
  transform: translateX(-50%) translateY(-50%);
  position: absolute;
  z-index: 3;
  background: #fdfdf9;
  width: var(--size);
  height: var(--size);
  border-radius: 50%;
}

.blinker i {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translateX(-50%) translateY(-50%);
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  opacity: 1;
}

.blinker i:nth-child(1) {
  animation: blinkBoxShadow var(--duration) ease-out infinite;
  display: block;
  border: 2px solid rgba(255, 255, 255, 0.5);
}

@keyframes blinkBoxShadow {
  from {
    /*box-shadow: 0 0 0 30px trasparent;*/
    background: transparent;
    opacity: 1;
    width:0px;
    height:0px;
  }
  to {
    /*box-shadow: 0 0 0 30px rgba(255, 255, 255, 0.7);*/
    background: rgba(255, 255, 255, 0.7);
    opacity: 0;
    width:61px;
    height:61px;
  }
}

.blinker i:nth-child(2) {
  transform: translateX(-50%) translateY(-50%);
  width: 61px;
  height: 61px;
  animation: blinkBoxShadow2 var(--duration) ease-out infinite;
  animation-delay: calc(var(--duration) - 500ms);
}

@keyframes blinkBoxShadow2 {
  from {
    /*box-shadow: 0 0 0 0px rgba(255, 179, 117, 0.7);*/
    background:transparent;
    opacity: 0;
  border:2px solid rgba(255, 179, 117, 0);
  width: 61px;
  height: 61px;
  }
  50% {
    opacity: 0.5;
  }
  to {
    /*box-shadow: 0 0 0 50px rgba(255, 179, 117, 0);*/
    background:rgba(255, 179, 117, 0.2);
    opacity: 0;
    width:140px;
    height:140px;
  border:2px solid rgba(255, 179, 117, 0.2);
  }
}

.blinker i:nth-child(3) {
  background: white;
}

<div class="blinker">
  <i></i>
  <i></i>
  <i></i>
</div>