1.线路图

先用svg绘制，线路图，画出几条线路，然后根据线路的起始坐标，添加动态效果，出现电流流动效果。

线路图源码

<svg id="svg" width="calc(100% - 4px)" height="calc(100% - 4px)" version="1.1"
xmlns="http://www.w3.org/2000/svg" style="border:2px solid #ccc;"><g id="global_box" transform="translate(0,0)"><line x1="100" y1="100" x2="300" y2="100" stroke="black" stroke-width="1"transform="matrix(1,0,0,1,47.99999894389384,7.999999816329364)"></line><circle cx="100" cy="100" r="10" stroke="#1F96DC" stroke-width="1" fill="#031546"transform="matrix(1,0,0,1,222.99999488018102,7.99999933949222)" id="t2"></circle><line x1="100" y1="100" x2="300" y2="100" stroke="black" stroke-width="1"transform="matrix(6.123233601181349e-17,1,-1,6.123233601181349e-17,286.99999341081593,5.999999362451035)"></line><circle cx="100" cy="100" r="10" stroke="#1F96DC" stroke-width="1" fill="#031546"transform="matrix(1,0,0,1,86.99999800258183,8.00000126979964)" id="t1"></circle><circle cx="100" cy="100" r="10" stroke="#1F96DC" stroke-width="1" fill="#031546"transform="matrix(1,0,0,1,86.99999035022864,114.9999973597346)" id="t3"></circle></g>
</svg>

线路图效果

2.html线路流动效果

利用svg线路图线路的stroke-dasharray和css的动画效果animation的结合，实现线路流动效果。

html源码

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server"><title>svg线路动态效果</title><style style="text/css">.svgLineDL{stroke-dasharray:0% 100% ;stroke:#FCFCEC;animation:move2 1s infinite;}@keyframes move2{0%{stroke-dasharray:0,100%;}100%{stroke-dasharray:100%,0;stroke:#C30000;}} </style>
</head>
<body><svg id="svg" width="calc(100% - 4px)" height="calc(100% - 4px)" version="1.1" xmlns="http://www.w3.org/2000/svg" style="border:2px solid #ccc;"><g id="global_box" transform="translate(0,0)"><line x1="100" y1="100" x2="300" y2="100" stroke="black" stroke-width="1"transform="matrix(1,0,0,1,47.99999894389384,7.999999816329364)"></line><circle cx="100" cy="100" r="10" stroke="#1F96DC" stroke-width="1" fill="#031546"transform="matrix(1,0,0,1,222.99999488018102,7.99999933949222)" id="t2"></circle><line x1="100" y1="100" x2="300" y2="100" stroke="black" stroke-width="1"transform="matrix(6.123233601181349e-17,1,-1,6.123233601181349e-17,286.99999341081593,5.999999362451035)"></line><circle cx="100" cy="100" r="10" stroke="#1F96DC" stroke-width="1" fill="#031546"transform="matrix(1,0,0,1,86.99999800258183,8.00000126979964)" id="t1"></circle><circle cx="100" cy="100" r="10" stroke="#1F96DC" stroke-width="1" fill="#031546"transform="matrix(1,0,0,1,86.99999035022864,114.9999973597346)" id="t3"></circle><line x1="187" y1="108" x2="323" y2="108" stroke="#C30000" stroke-width="2"></line><line x1="187" y1="108" x2="323" y2="108" stroke="#C30000" class="svgLineDL"stroke-width="2"></line><line x1="187" y1="215" x2="187" y2="108" class="svgLineDL" stroke="#C30000"stroke-width="2"></line></g>
</svg>
</svg>
</body></html>

3.动态效果

可以实现点到点的线路流动，也可以实现单一线路流动，也支持多分支线路流动。

4.svg相关资源

svg线路图-线路动态流动效果相关推荐

html svg波浪,CSS实现svg图片水纹波浪流动效果
CSS实现svg图片水纹波浪流动效果里面的其他颜色是自己加的,把下面代码自己改改就可以html> 标题 body { margin:0; background:red; } h1 { fo ...
svg实现文字笔画流动效果
背景: 前段时间着手某一项目时UI提出实现文字笔画流动效果的需求,故在github和gitee上寻找灵感,最后从一位学长的项目中找到了实现方法,感觉收获颇多,特此记录. 解决方案: 搭建svg基本的h ...
Echart实现的数据可视化统计人口流动效果（功能：饼状图、条形图、叠加条形图、流入流出动态图）
博客目录 Echart实现的可视化统计人口流动效果实现功能截图系统功能技术点总结代码写在最后 Echart实现的可视化统计人口流动效果最近使用echart实现了人口统计的可视化效果,常用的 ...
HT for Web中3D流动效果的实现与应用
流动效果在3D领域有着广泛的应用场景,如上图中医学领域可通过3D的流动直观的观察人体血液的流动,燃气领域可用于监控管道内流动的液体或气体的流向.流速和温度等指标. 如今企业数据中心机房普遍面临着设备散 ...
用SVG技术实现动态图形输出的嵌入式Web服务
摘要本文结合控制系统对嵌入式Web服务器的要求,分析了嵌入式Web服务器的基本原理.动态内容实现方法,并结合实例着重介绍了基于SVG技术实现动态图形输出的方法. 关键字嵌入式系统 SV ...
实现类似表格内容动态滚动效果
文章目录需求背景效果图实现思路示例代码需求背景在一些大屏首页展示上,通常会有一些表格展示,由于大屏的特殊性,不会有人专门去操作这个页面查看相应数据,一般都会采用动态滚动的效果.下面是具体的 ...
【CSON原创】HTML5字体动态粒子效果发布
功能说明: 输入字体,按确定后,右侧画布出现字体的动态粒子效果. 效果预览: 输入显示内容: 实现分析: 之前看过hongru的事情没有想象中那么难--JX官网首页3D粒子效果,和当耐特砖家的HTML ...
Android SurfaceView实现静态于动态画图效果
本文是基于Android的SurfaceView的动态画图效果,实现静态和动态下的正弦波画图,可作为自己做图的简单参考,废话不多说,先上图, 静态效果: 动态效果: 比较简单,代码注释的也比较详细,易 ...
jQuery制作动态酷效果总结
jQuery是一个优秀的JavaScript框架,可以很好的解决不同浏览器兼容的问题,尤其是在ASP.NET MVC下,它的作用更加的凸显. jQuery在制作动态酷效果的时候有很强的优势,以下是笔者 ...

svg线路图-线路动态流动效果

文章目录

1.线路图

2.html线路流动效果

3.动态效果

4.svg相关资源

svg线路图-线路动态流动效果相关推荐

最新文章

热门文章