css3实现动态心电图折线

CSS3可以用来创建动态心电图折线，通常需要结合JavaScript来实现数据的更新和动画效果。以下是一个简单的例子，演示如何使用CSS3创建一个动态心电图折线。

HTML:

<div id="heartRate" class="heart-rate-chart">
  <div class="chart-line">
    <span class="dot"></span>
  </div>
</div>

CSS:

.heart-rate-chart {
  width: 400px;
  height: 200px;
  position: relative;
  overflow: hidden;
  background-color: #f2f2f2;
  border: 1px solid #ddd;
}
 
.chart-line {
  position: absolute;
  width: 100%;
  height: 100%;
  background-image: linear-gradient(to right, #ff3366, #ff3366), linear-gradient(to right, #14a1ff, #14a1ff);
  background-size: 100% 200px, 100% 200px;
  background-repeat: no-repeat;
  background-position: bottom, top;
  animation: moveChartLine 5s linear infinite;
}
 
.dot {
  position: absolute;
  width: 10px;
  height: 10px;
  background-color: #ff3366;
  border-radius: 50%;
  bottom: 150px;
  animation: moveDot 5s linear infinite;
}
 
@keyframes moveChartLine {
  0% {
    background-position: bottom, top;
  }
  50% {
    background-position: bottom calc(100% - 200px), top calc(100% - 200px);
  }
  100% {
    background-position: bottom, top;
  }
}
 
@keyframes moveDot {
  0% {
    bottom: 150px;
  }
  100% {
    bottom: -50px;
  }
}

这个例子中，.heart-rate-chart 是心电图的容器，.chart-line 是折线图，.dot 是代表心跳的点。CSS动画moveChartLine 控制折线上下移动，而moveDot 控制点从容器底部移动至顶部，模拟心跳的动态效果。

要实现实际的数据更新，你需要用JavaScript动态地调整.dot的bottom位置。这里的例子是静态的，只是展示了如何用CSS3创建动态心电图折线的基本原理。