首页 > 代码库 > 基于SVG.js实现网页初始化线条描绘效果
基于SVG.js实现网页初始化线条描绘效果
前端实现看到一个网页的效果很cool(参考https://tympanus.net/Development/SVGDrawingAnimation/index2.html),决定自己去实现以下这个效果,并且封装成一个js插件供大家简单去实现该效果;
目前,已经实现了三种效果(描绘容器的边框,描绘线状统计图样式,描绘饼状统计图样式);
使用方法:
1、首先引入jquery和svg.js
2、然后引入svg.webInitAnimation.js
3、定义自己的dom元素
4、选择想要绘制的样式添加到class属性中
如下
<html> <head> <script type="text/javascript" src="jquery-1.9.1.min.js"></script> <script type="text/javascript" src="svg.js"></script> <script type="text/javascript" src="svg.webInitAnimation.js"></script> </head> <body class="bg-fill" style="background-color:#07263B;margin:0;padding:0;"> <div style="margin-top:20px;text-align:center;"> <span class="init_border">fdsgfsdgfdsg</span> </div> <span class="init_border" style="margin-left:100px;">fdsafdas</span> <div class="init_chartline init_border" style="margin-left:400px;margin-top:50px; background-color: red; width:300px;height:200px;"></div> <div class="init_pie" style="margin-left:200px;margin-top:50px; background-color: red; width:300px;height:300px;"></div> </body> </html>
用法解释:
首先如果你想要背景色填充动画样式,在body节点添加bg-fill类,并且设置body的背景色,如果不需要该效果则不需添加样式和class
边框描绘:选择你想要描绘边框的dom在class中添加init_border类即可,
线状统计图样式:选择你需要绘制该样式的dom添加init_chartline类即可,
饼状统计图样式:选择你需要绘制该样式的dom添加init_pie类即可
以上的样式效果可以在同一dom上添加,最好是init_border和其他样式配合使用
注意:
在边框描绘样式中如果选择的是文字的边框,请确保选择的dom是完整包围文字的,最好选择行内元素,块状元素(例如<div style="width:100%;text-align:center;">testtext</div>)则不能确点描绘的是文字的边框而是div块状元素的边框了
后续会添加更多的样式效果请关注我的github
基于SVG.js实现网页初始化线条描绘效果