这种css复杂（且动态）的UI的效果该如何实现？
图一：
1、动态时间轴的长短根据起止时间来定的，就是说如果时间更长，结束点有可能继续往下（拐弯）走；
2、灰色表示整个轴的长度，渐变（彩）色表示实际进度；
3、时间轴上的小圆点也是动态的，表示某一天对应的位置；
4、点击时间轴上的白色小圆点，会弹出对应的下拉卡片，卡片有堆叠效果，表示可以继续展开，点击卡片上的蓝色小圆点，则继续展开内容；
图二：
1、点击卡片上蓝色小圆点，展示详细内容，时间轴及其他卡片处于高斯模糊状态，以突出当前选中的卡片及其详细内容。
实现要求：
图一、图二里面的说明就是UI需要实现的效果，另外就是整个时间轴内容需要可以方法、缩小、拖拽；
思路及想法：
昨天研究了一天，发现用常规的 css 技术连 “图一” 的时间轴都无法做到，所以来请教下大家有什么要建议，我的想法有两种：
1、通过canvas技术来实现时间轴（灰色轨迹和渐变色的实际进度）图，把canvas图当作背景图片，然后通过绝对定位，把开始、结束、每天一天对应的点都打上去，然后放到缩小、拖拽等所有其他逻辑通过css、js技术实现；
2、整个效果、交互都通过canvas来实现，但是对于canvas美什么经验，不敢轻易使用；
请教下大家有什么好的意见或建议，或者好的canvas操作库等，谢谢！
共有3个答案
canvas不熟的话可以考虑用 svg 来画，配合css做动画是可以实现的
SVG画起来感觉还好，难到不难，就是比较繁琐。。。 最好找下看有什么第三方库，简化操作
<!DOCTYPE html><html><body> <svg class="test" width="500" height="300" style="background-color: rgb(232, 234, 238);"> <!-- 渐变色 --> <defs> <linearGradient id="gradient" x1="0%" y1="0%" x2="0%" y2="100%"> <stop offset="0%" style="stop-color:#5897ee;"></stop> <stop offset="100%" style="stop-color:#eda378;"></stop> </linearGradient> </defs> <!-- 轨道 --> <path d=" M 20 20 L 430 20 C 480 20 480 120 430 120 L 430 120 L 20 120" stroke="#dddfe4" stroke-width="21" stroke-linecap="round" stroke-linejoin="round" fill="transparent"></path> <!-- 进度 --> <path d=" M 20 20 L 430 20 C 480 20 480 120 430 120 L 430 120 L 200 120" stroke="url(#gradient)" stroke-width="21" stroke-linecap="round" stroke-linejoin="round" fill="transparent"></path> <!-- 圈 --> <circle cx="20" cy="170" r="10" fill="#2274fa" /> <circle cx="50" cy="170" r="10" fill="#e78d48" /> <circle cx="80" cy="170" r="6" fill="#fff" /> <path d="M 76 170 H 84" stroke="#2274fa" stroke-width="1" stroke-linecap="round" stroke-linejoin="round" fill="transparent"></path> <circle cx="100" cy="170" r="6" fill="#fff" /> <path d="M 96 170 H 104" stroke="#2274fa" stroke-width="1" stroke-linecap="round" stroke-linejoin="round" fill="transparent"></path> <path d="M 100 166 V 174" stroke="#2274fa" stroke-width="1" stroke-linecap="round" stroke-linejoin="round" fill="transparent"></path> <!-- 文本 --> <path d="M 120 140 H 250 V 200 H 120 Z" stroke="transparent" stroke-width="1" stroke-linecap="round" stroke-linejoin="round" fill="#fff"></path> <text x="140" y="160" font-family="Verdana" font-size="12"> <tspan x="140" y="160" fill="red">不支持自动换行</tspan> <tspan x="140" y="180">这是第二行</tspan> </text> </svg></body></html>
CSS实现的思路是有的，多个弯可以用 gird 布局来处理 border 的弯折，但是会复杂。
Canvas来实现确实会好很多，但是相对来说如果没有canvas经验的话，付出的时间成本会更大。
至于毛玻璃效果可以直接用 filter: blur() 来实现，这个反而是实现起来最简单的。
-
简单说明如下： 1、整个图由“主节点”串联起来，“主节点”可以（多个）并列（如：节点5 和 节点6），串联使用如图中的箭头； 2、每一个“主节点”是一个“特殊”的“树形结构”，如“主节点2”，可以通过“展开、收起”按钮隐藏“主节点”的所有子节点； 3、主节点的子节点有鼠标移上去蓝色按钮交互（鼠标移上去，显示内容，可能有多个，需要用箭头像主节点5、6一样串联起来）。 背景： 考虑到其中有些部分比较具
-
这种css效果咋实现。
-
这种效果如何使用THREEjs实现?
-
https://the7.io/elementor-minimal-creative-light/ 这种鼠标滚动图片也有一定的动态效果的效果是怎么实现的？
-
点击输入框前: 点击输入框后: