Javascript 用边界和边界半径建立心电脉冲线动画

我有以下代码：

C.说唱歌手{ 显示器：flex； } 克莱恩先生{ 宽度：100px； 高度：100px； 边框：1px实心； } .cLine1{ 背景色：透明； 边框颜色：透明灰色透明灰色； 边框右下半径：20px； } .cLine2{ 宽度：20px； 高度：150像素； 背景色：透明； 边框颜色：灰灰色透明； 边框右上角半径：20px； } .cLine3{ 宽度：20px； 高度：50px； 背景色：透明； 边框颜色：透明灰色透明灰色； 边框右下半径：20px； 自对准：柔性端； } .cLine4{ 宽度：50px； 高度：100px； 背景色：透明； 边框颜色：透明灰色透明； }

---

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

在那之后，我有了一个想法，与这样一个动画小圈子一起工作，因为这是现代网络解决方案的已知标准。所以我也试着让小圆圈互相跟随，但以ecg脉冲线的形式。它很好用，看起来很漂亮。我使用了css3关键帧。现在看起来是这样的：

C.说唱歌手{ 宽度：200px； 高度：300px； 背景色：透明； 位置：相对位置； 显示器：flex； 调整内容：灵活启动； } C.点{ 宽度：10px； 高度：10px； 边界半径：10px； 背景色：黑色； 位置：绝对位置； 左：0px； 顶部：50px； -webkit动画名称：pulse； /*铬、狩猎、歌剧*/ -webkit动画持续时间：2.0秒； /*铬、狩猎、歌剧*/ -webkit动画计时功能：线性； -webkit动画迭代计数：无限； 动画名称：脉冲； 动画持续时间：2.0s； 动画计时功能：线性； 动画迭代次数：无限； } .p1{ -webkit动画延迟：0秒； 动画延迟：0s； } .p2{ -webkit动画延迟：0.2s； 动画延迟：0.2s； } .p3{ -webkit动画延迟：0.4s； 动画延迟：0.4s； } .p4{ -webkit动画延迟：0.6s； 动画延迟：0.6s； } .p5{ -webkit动画延迟：0.8s； 动画延迟：0.8s； } @-webkit关键帧脉冲{ 0%: { 左：0px； 顶部：50px； } 30% { 左：50px； 顶部：50px； } 40% { 左：70像素； 顶部：0px； } 60% { 左：90px； 顶部：100px } 70% { 左：110像素； 顶部：50px； } 100% { 左：160像素； 顶部：50px； } } @关键帧脉冲{ 0%: { 左：0px； 顶部：50px； } 30% { 左：50px； 顶部：50px； } 40% { 左：70像素； 顶部：0px； } 60% { 左：90px； 顶部：100px } 70% { 左：110像素； 顶部：50px； } 100% { 左：160像素； 顶部：50px； } }

---

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

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

---

我建议在JS脚本中使用画布移动div，并在屏幕的一半上创建另一个黑色div，它将是静态的，并且将覆盖屏幕的右半部分screen@MaciejWójcik那么你正在用这个想法做一个例子？还是只是建议我自己试试？谢谢，我可以举一些例子，但以后再说。现在这是唯一的想法。如果你做不到，请写信给我，然后我试着举例说明这个问题要么太宽泛，基于观点，要么需要讨论，因此与堆栈溢出无关。@MaciejWójcik请看我自己的答案，我就是这样解决的。太好了！你自己解决了你的问题。值得一投。@learnhowtobetransport是的，太棒了，谢谢！干杯