html 用贝塞尔曲线连接两个dom

可以使用CSS3的贝塞尔曲线函数`cubic-bezier()`来实现。具体步骤如下：

1. 创建两个DOM元素，分别为起点和终点元素。
2. 创建一个空的`div`元素，并设置其`position: absolute`，并将其插入到两个DOM元素的共同父元素内，用于承载贝塞尔曲线。
3. 使用CSS3的`cubic-bezier()`函数来定义贝塞尔曲线的控制点，将其应用到`div`元素的`transition-timing-function`属性上。
4. 使用CSS3的`transform`属性来将`div`元素移动到起点和终点元素的位置，并设置其宽度为两个DOM元素之间的距离。
5. 当需要连接两个DOM元素时，将`div`元素的`transform`属性设置为终点元素的位置，此时贝塞尔曲线会自动连接起点和终点元素。

具体的代码实现可以参考以下示例：

<div class="container">
  <div class="start"></div>
  <div class="end"></div>
  <div class="curve"></div>
</div>

<style>
  .container {
    position: relative;
    height: 500px;
  }
  .start, .end {
    position: absolute;
    width: 20px;
    height: 20px;
    background-color: #000;
    border-radius: 50%;
  }
  .start {
    top: 100px;
    left: 100px;
  }
  .end {
    top: 300px;
    left: 300px;
  }
  .curve {
    position: absolute;
    width: 200px;
    height: 2px;
    background-color: #000;
    transform: translate(100px, 100px);
    transition: transform 1s cubic-bezier(0.68, -0.55, 0.265, 1.55);
  }
</style>

<script>
  var start = document.querySelector('.start');
  var end = document.querySelector('.end');
  var curve = document.querySelector('.curve');
  
  curve.style.transform = 'translate(' + end.offsetLeft + 'px, ' + end.offsetTop + 'px)';
</script>