首页 > 代码库 > 基于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实现网页初始化线条描绘效果