基于SVG.js实现网页初始化线条描绘效果

Posted 2020-09-08 随风而逝

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了基于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>