很多科技网站上经常看到这种科技感很强的优美曲线，看似繁琐其实步骤很简单。

第一步，打开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');