三次贝塞尔曲线 一直想要一个 曲线箭头，先AI出个代码先存着。
虚线是带动画的
https://www.qianwen.com/share?shareId=4c263835-e3a0-45a9-9a1f-8c57b72687c0&type=codePreview
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>双曲率柔和虚线箭头</title>
<style>
body {
background: #1a1a1a;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
margin: 0;
}
/* 虚线流动动画 */
.flow-line {
fill: none;
stroke: #00e5ff;
stroke-width: 3;
/* 定义虚线：每段线长10px，间隔5px */
stroke-dasharray: 10 5;
animation: flow 1s linear infinite;
}
@keyframes flow {
from { stroke-dashoffset: 15; } /* 10 + 5 = 15，虚线向后推 */
to { stroke-dashoffset: 0; } /* 移动到0，产生向前流动的视觉效果 */
}
/* 箭头样式 */
.arrow-head {
fill: #00e5ff;
}
</style>
</head>
<body>
<svg width="500" height="300" viewBox="0 0 500 300">
<!-- 1. 绘制三次贝塞尔曲线 -->
<path class="flow-line" d="M 50 250 C 250 250, 250 50, 450 50" />
<!-- 2. 在终点绘制箭头 -->
<polygon class="arrow-head" points="-12,-6 0,0 -12,6" transform="translate(450, 50) rotate(45)" />
</svg>
<script>
// 已知坐标
const x1 = 50, y1 = 250;
const x2 = 450, y2 = 50;
// 三次贝塞尔曲线的两个控制点
// 策略：让控制点1的Y等于起点Y，控制点2的Y等于终点Y，实现两端平缓过渡
const cx1 = 250, cy1 = 250;
const cx2 = 250, cy2 = 50;
// 计算曲线在终点 (t=1) 的切线角度
// 三次贝塞尔曲线终点切线方向向量 = (终点 - 第二个控制点)
const dx = x2 - cx2;
const dy = y2 - cy2;
// 将弧度转换为角度
const angle = Math.atan2(dy, dx) * 180 / Math.PI;
// 获取箭头元素并应用旋转
const arrow = document.querySelector('.arrow-head');
// translate 移动到终点，rotate 围绕箭头自身原点旋转
arrow.setAttribute('transform', `translate(${x2}, ${y2}) rotate(${angle})`);
</script>
</body>
</html>
我想用 html css 制作一个箭头，已知 x1y1 和 x2y2 然后两点之间是曲线 然后最好曲线是虚线 还有虚线的位移动画，方向是 从x1y1 到 x2y2 然后箭头在x2y2 的位置上
曲线要双曲线，就是两头的曲率是相反的，看起来很柔和的
这个库 就是专门做箭头的，输入开始和结束的坐标 就能计算出所有的路径
https://www.npmjs.com/package/perfect-arrows
此内容由惯性聚合(RSS阅读器)自动聚合整理，仅供阅读参考。 原文来自 — 版权归原作者所有。