Question

我正在尝试制作一个圆圈的简单动画，其边框从红色变为透明色。我如何尝试这样做是将初始颜色设置为红色，然后使用关键帧将其设置为透明，如下所示：

.pulse{
  margin: 20px;
  width:100px;
  height: 100px;
  background-color: red;
  border-radius: 100px;
  animation-name: pulse;
  animation-duration: 1s;
  animation-iteration-count: infinite;
  animation-direction: alternate;
  animation-timing-function: ease;
}

@keyframes pulse{
  0%{border:solid 1px rgba(255, 0, 0, 1)}
  100%{border:solid 1px rgba(255, 0, 0, 0)}
}

    <div class="animation">
      <div class="pulse"></div>
    </div>

似乎没有任何反应但是在摆弄它之后我意识到动画实际上是有效的，但是透明动画显示在现有的红色边框的顶部，效果是看起来没有任何事情发生。我想要实现的是让边框从红色变为透明，使它看起来像是在搏动，但没有圆圈改变它的大小。

Answer 1

尝试使用box-shadow代替border

Stack Snippet

.pulse {
  margin: 20px;
  width: 100px;
  height: 100px;
  background-color: red;
  border-radius: 100px;
  animation-name: pulse;
  animation-duration: 1s;
  animation-iteration-count: infinite;
  animation-direction: alternate;
  animation-timing-function: linear;
}

@keyframes pulse {
  0% {
    box-shadow: 0 0 0 4px rgba(255, 0, 0, 1);
  }
  100% {
    box-shadow: 0 0 0 0px rgba(255, 0, 0, 1);
  }
}

<div class="animation">
  <div class="pulse"></div>
</div>

Answer 2

您将看不到任何内容，因为背景颜色与边框颜色的颜色相同。你的动画中的边框定义也是错误的，宽度必须在边框样式之前：

例如，它是1px solid color而不是solid 1px rgba(255,0,0,1)。

.pulse {
  animation: pulse 1s ease infinite alternate;
  background-color: #ddd;
  border-radius: 100px;
  height: 100px;
  margin: 20px;
  width: 100px;
}

@keyframes pulse {
  0% {
    border: 1px solid rgba(255, 0, 0, 1)
  }
  100% {
    border: 1px solid rgba(255, 0, 0, 0)
  }
}

<div class="animation">
  <div class="pulse"></div>
</div>

但我认为您想要达到脉动效果，因此我建议您使用transform: scale()来创造所需的效果。

@keyframes pulse{
  from { transform: scale(1) }
  to { transform: scale(.75) }
}

.pulse{
  margin: 20px;
  width:100px;
  height: 100px;
  border-radius: 100px;
  background-color: red;
  animation: pulse 1s ease infinite alternate;
}

<div class="animation">
      <div class="pulse"></div>
    </div>

Answer 3

只需将background-clip: padding-box;添加到.pulse元素即可。更多信息here。如前面的答案所述，你也可以使用box-shadow，但你必须记住，box shadow不会占用元素周围的空间。所以你会有不同的行为。

.pulse {
  background-clip: padding-box;
  margin: 20px;
  width:100px;
  height: 100px;
  background-color: red;
  border-radius: 100px;
  animation-name: pulse;
  animation-duration: 1s;
  animation-iteration-count: infinite;
  animation-timing-function: ease;
}

@keyframes pulse{
  0%{border:solid 1px rgba(255, 0, 0, 1)}
  100%{border:solid 1px rgba(255, 0, 0, 0)}
}

<div class="animation">
  <div class="pulse"></div>
</div>

使用关键帧将边框设置为透明动态

3 个答案: