很多科技网站上经常看到这种科技感很强的优美曲线，看似繁琐其实步骤很简单。
第一步，打开AI软件，用钢笔工具随意勾两条线出来。
第二步，描边两条线，一条为深色，一条为浅色
第三步，选择混合工具，选中两条线
第四步，效果基本已经完成了，需要导出成svg供我们在页面使用即可
第五步，应用到我们的网站，调整尺寸，并且添加动画效果，错落出现
第六步，动态的在svg运动轨迹上添加DOM元素，作为时间点，并依次延迟出现
var that = this;
function createSmartMarkers(msg) {
// 清空旧标记
document.querySelectorAll('.path-marker').forEach(m => m.remove());
// 获取窗口宽度外的留白
const segmentCount = that.Con2Text.length;
var liubai = 0;
var jianju = 0;
if(window.innerWidth>1200){
liubai = ((window.innerWidth - 1200)*0.5)/window.innerWidth+0.02;
jianju = 1200
}
const svg = document.getElementById('index_sidai_svg');
const path = document.getElementById('layer1');
const totalLength = path.getTotalLength();
const startPosition = totalLength * liubai; // 从50%位置开始
console.log(totalLength,'totalLength')
// 创建标记点
for(let i = 0; i <= segmentCount; i++) {
// 计算路径位置（50%-100%之间）
const pos = startPosition + (totalLength * (1-liubai*2)) * (i / segmentCount);
// 获取SVG坐标点
const svgPoint = path.getPointAtLength(pos);
// 转换为页面坐标
const svgRect = svg.getBoundingClientRect();
console.log(svgRect.height,svg.viewBox.baseVal.height,svgRect.top,'svgPoint');
const pageX = svgPoint.x * (svgRect.width / svg.viewBox.baseVal.width) + svgRect.left;
// const pageY = svgPoint.y * (svgRect.height / svg.viewBox.baseVal.height) + svgRect.top;
const pageY = svgPoint.y * (svgRect.height / svg.viewBox.baseVal.height) + 220;
var yanchi = 0
if(msg=='noe'){
yanchi=1
}else{
yanchi=0
}
// 创建DIV元素
const marker = document.createElement('div');
marker.className = 'path-marker';
Object.assign(marker.style, {
left: `${pageX}px`,
top: `${pageY}px`,
animationDelay: `${yanchi+i * 0.3}s`
});
const wenan = document.createElement('div');
wenan.className = 'path-wenan';
const h2 = document.createElement('h2');
h2.innerHTML = that.Con2Text[i].title;
wenan.appendChild(h2);
for(var j = 0; j < that.Con2Text[i].h.length; j++){
const span = document.createElement('span');
span.innerHTML = that.Con2Text[i].h[j];
wenan.appendChild(span);
}
// 添加悬浮提示
marker.title = `位置：${((pos / totalLength) * 100).toFixed(1)}%`;
const container = document.getElementById('svgBiaoji');
marker.appendChild(wenan);
container.appendChild(marker);
}
}
// 响应式更新
window.addEventListener('resize', createSmartMarkers);
createSmartMarkers('noe');
做好兼容，添加窗口监听，每次窗口变化重新计算并生成节点
