用html+css+js实现两个点之间出现浮动箭头

要在两个点之间绘制一个浮动箭头，您可以使用HTML、CSS和JavaScript来实现。以下是一个示例代码：

HTML:

<div class="arrow-container">
  <div class="arrow"></div>
</div>

CSS:

.arrow-container {
  position: relative;
  width: 100%;
  height: 100vh;
}

.arrow {
  width: 0;
  height: 0;
  border-left: 10px solid transparent;
  border-right: 10px solid transparent;
  border-bottom: 10px solid #000;
  position: absolute;
  transform-origin: bottom center;
}

JavaScript:

function drawArrow(startX, startY, endX, endY) {
  var arrow = document.querySelector('.arrow');
  var container = document.querySelector('.arrow-container');

  var angle = Math.atan2(endY - startY, endX - startX);
  var distance = Math.sqrt(Math.pow(endX - startX, 2) + Math.pow(endY - startY, 2));

  arrow.style.width = distance + 'px';
  arrow.style.transform = 'translate(' + startX + 'px,' + startY + 'px) rotate(' + angle + 'rad)';
  
  container.style.width = Math.max(startX, endX) + 'px'; // 根据两个点的位置设置容器的宽度
  container.style.height = Math.max(startY, endY) + 'px'; // 根据两个点的位置设置容器的高度
}

// 示例调用
drawArrow(100, 100, 300, 300);

在这段代码中，我们使用了两个点的坐标来计算箭头的角度和距离。然后，我们使用CSS的`transform`属性将箭头平移到起始点，并以计算出的角度进行旋转。最后，我们根据两个点的位置动态调整容器的大小，以确保箭头完全显示在两个点之间。

注意，这只是一个简单的示例代码，您可以根据实际需求进行调整和改进。

希望这对您有所帮助！如有任何其他问题，请随时提问。