作为一名前端工程师, 需要对css
技巧有充分的研究和了解, 接下来笔者将会带大家一起掌握如何用css
的圆角属性来实现有点意思的加载动画.
如果想学习更多css
实用技巧, 可以参考笔者以下的文章:
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
动画是不是可以实现下面的加载动画了?
如果你想实现不同比例的饼图, 其实只要合理计算好border-width
即可, 有了以上知识, 我们结合animation
动画是不是可以实现下面的加载动画了?
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
知识, 我们再来思考一下, 如何用最简短的代码实现一个圆环呢? 其实也很简单, 我们在上面用到了圆角和border
来做圆形和饼图, 如果我们设置一个元素的宽度width
和高度height
, 并且背景透明(transparent), 会怎么样呢, 我们来看看:
代码如下:
.rotate-animate { border:16pxsolid#f3f3f3; border-radius:50%; border-top:16pxsolid#2842d8; width:100px; height:100px; }
那么我们做圆环加载动画, 就非常简单了, 利用上面写的旋转动画, 我们来看看效果:
圆环加载动画的整代码如下:
<style>.rotate-animate { border:16pxsolid#f3f3f3; border-radius:50%; border-top:16pxsolid#2842d8; width:100px; height:100px; animation:rotate2slinearinfinite; } .rotate-animate.fill-color { margin-left: 20px; border-color: #2842d8#d1b516#cf4928#27c965; } @keyframesrotate{ 0%{ transform: rotate(0deg); } 100%{ transform:rotate(360deg); } } </style><!-- html --><divclass="rotate-animate"></div><divclass="rotate-animate fill-color"></div>
我们利用此特性还可以实现更多有意思的图案和加载动画, 大家可以细细品尝. 笔者这里推荐2篇比较使用的css
文章:
还有一些偏底层的css文章可以参考我之前的文章.
开源项目更新日志
目前H5-Dooring
可视化搭建平台还在持续更新, 主要更新如下:
- 添加地图组件, 可自定义地理位置信息和标注
- 修复图片库不显示问题
- 添加日历组件
- 优化拖拽下载代码功能