使用边框和边界半径构建的动画ecg脉冲线

Question

我有以下代码：

＆＃13;

＆＃13;

.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;
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

我尝试使用border和border-radius构建心电图脉冲线。这对我来说很容易（我必须把它设计得更好一些，但目前它对我有好处）。因此下一个主干是为这些线设置动画并制作一个ecg脉冲线，如下例所示：

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

Answer 1

我为医疗保健开发软件解决方案，当我必须等待任何数据等时，我需要一个自己的加载指示器。所以我决定制作一个ecg脉冲线动画来保持软件的主题。之后我看到windows 8的加载指示符就像这样：

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

＆＃13;

＆＃13;

.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;
  }
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

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

Answer 2

我认为解决问题的最方便方法是使用包装在Web组件中的画布。在this github存储库中检查源代码

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