使用 border 和 border-radius 构建的动画心电脉冲线

Question

我有以下代码：

.cWrapper {
  display: flex;
}
.cLine {
  width: 100px;
  height: 100px;
  border: 1px solid;
}
.cLine1 {
  background-color: transparent;
  border-color: transparent gray gray transparent;
  border-bottom-right-radius: 20px;
}
.cLine2 {
  width: 20px;
  height: 150px;
  background-color: transparent;
  border-color: gray gray transparent transparent;
  border-top-right-radius: 20px;
}
.cLine3 {
  width: 20px;
  height: 50px;
  background-color: transparent;
  border-color: transparent gray gray transparent;
  border-bottom-right-radius: 20px;
  align-self: flex-end;
}
.cLine4 {
  width: 50px;
  height: 100px;
  background-color: transparent;
  border-color: transparent transparent gray transparent;
}

<div class="cWrapper">
  <canvas class="cLine cLine1"></canvas>
  <canvas class="cLine cLine2"></canvas>
  <canvas class="cLine cLine3"></canvas>
  <canvas class="cLine cLine4"></canvas>
</div>

我尝试用 border 和 border-radius 构建心电图脉冲线。这对我来说很容易（我必须稍微调整一下样式，但目前它对我有好处）。所以下一个主干是为这条线制作动画并制作一条心电图脉冲线，就像这个例子一样：

目前我不知道该怎么做。我尝试使用 jquery 和 animate() 以及 css3 keyframes，但没有任何效果。有人知道如何做到这一点吗？谢谢。

Answer 1

我为医疗保健开发软件解决方案，我需要一个自己的加载指示器，当我必须等待任何数据等时。所以我决定制作一个 ecg 脉冲线动画以留在软件的主题上。之后我看到了 windows 8 的加载指示器，它的工作方式如下：

之后我有了想法，也可以使用这样的动画（每个后面都有小圆圈），因为这是现代网络解决方案的已知标准。所以我也试着画一些小圆圈，但以心电图脉冲线的形式。它工作正常，看起来很漂亮。我用了css3 keyframes。现在看起来像这样：

.cWrapper {
  width: 200px;
  height: 300px;
  background-color: transparent;
  position: relative;
  display: flex;
  justify-content: flex-start;
}
.cPoint {
  width: 10px;
  height: 10px;
  border-radius: 10px;
  background-color: black;
  position: absolute;
  left: 0px;
  top: 50px;
  -webkit-animation-name: pulse;
  /* Chrome, Safari, Opera */
  -webkit-animation-duration: 2.0s;
  /* Chrome, Safari, Opera */
  -webkit-animation-timing-function: linear;
  -webkit-animation-iteration-count: infinite;
  animation-name: pulse;
  animation-duration: 2.0s;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
}
.p1 {
  -webkit-animation-delay: 0s;
  animation-delay: 0s;
}
.p2 {
  -webkit-animation-delay: 0.2s;
  animation-delay: 0.2s;
}
.p3 {
  -webkit-animation-delay: 0.4s;
  animation-delay: 0.4s;
}
.p4 {
  -webkit-animation-delay: 0.6s;
  animation-delay: 0.6s;
}
.p5 {
  -webkit-animation-delay: 0.8s;
  animation-delay: 0.8s;
}
@-webkit-keyframes pulse {
  0%: {
    left: 0px;
    top: 50px;
  }
  30% {
    left: 50px;
    top: 50px;
  }
  40% {
    left: 70px;
    top: 0px;
  }
  60% {
    left: 90px;
    top: 100px
  }
  70% {
    left: 110px;
    top: 50px;
  }
  100% {
    left: 160px;
    top: 50px;
  }
}
@keyframes pulse {
  0%: {
    left: 0px;
    top: 50px;
  }
  30% {
    left: 50px;
    top: 50px;
  }
  40% {
    left: 70px;
    top: 0px;
  }
  60% {
    left: 90px;
    top: 100px
  }
  70% {
    left: 110px;
    top: 50px;
  }
  100% {
    left: 160px;
    top: 50px;
  }
}

<div class="cWrapper">
  <div class="cPoint p1"></div>
  <div class="cPoint p2"></div>
  <div class="cPoint p3"></div>
  <div class="cPoint p4"></div>
  <div class="cPoint p5"></div>
</div>

所以这解决了我的要求。谢谢。

Answer 2

我认为解决问题最方便的方法是使用包裹在 Web 组件中的 canvas。在 this github 存储库

中检查源代码

document.body.innerHTML += '<ecg-line></ecg-line>';
ecgLine((bang) => setInterval(() => bang(), 1000));

使用 border 和 border-radius 构建的动画心电脉冲线

Animate ecg pulse line builded with border and border-radius

html

javascript

css

jquery

keyframe