css的border属性和border-radius属性作者在之前的文章中也分享了如何使用border实现不同的形状，比如三角形。示意图如下：利用这个原理，我们只需要将元素的border-radius设置为圆形（比如50%），就可以实现饼图了吗？来看看效果：上面是设置单边border-color的样子和设置四边border-color的样子，所以用css来实现饼图就够了。代码如下：.rotate-animate{border:100pxsolid#f3f3f3;border-radius:50%;border-top:100pxsolid#2842d8;}如果想实现不同比例的饼图，其实只要由于border-width计算合理，有了上面的知识，我们是不是可以结合animation动画来实现下面的loading动画呢？css代码如下：.rotate-animate{border:100pxsolid#f3f3f3;border-radius:50%;border-top:100pxsolid#2842d8;animation:rotate2slinearinfinite;}@keyframesrotate{0%{transform:rotate(0deg);}100%{transform:rotate(360deg);}}我们在做css3动画的时候经常会用到Transform和animation，所以建议大家掌握这两个属性。补充：如果要实现扇形，是不是也很简单？实现更优雅的圆环加载动画有了上面的css知识，我们再想一想，看看，如何用最短的代码实现一个圆圈？其实也很简单。我们使用圆角和边框来制作圆圈和饼图。如果我们设置一个元素的宽高，并且背景为Transparent（透明），会发生什么，我们来看看：代码如下：.rotate-animate{border:16pxsolid#f3f3f3;边界半径：50%；边框顶部：16pxsolid#2842d8；100px;}然后我们制作圆环加载动画，很简单，用上面写的旋转动画画出来，我们来看看效果：环形加载动画的全部代码如下：我们可以利用这个特性来实现更有趣的花样和加载动画，大家可以细细品味。还有一些底层的css文章可以参考。上一篇文章。开源项目更新日志目前H5-Dooring可视化搭建平台仍在更新中。主要更新如下：添加地图组件，自定义地理位置信息和标注，修复图库不显示问题，添加日历组件，优化拖拽下载代码功能
