当前栏目
巧用Css圆角实现有点意思的加载动画
作为一名前端工程师, 需要对css技巧有充分的研究和了解, 接下来笔者将会带大家一起掌握如何用css的圆角属性来实现有点意思的加载动画.
如果想学习更多css实用技巧, 可以参考笔者以下的文章:
![](https://s6.51cto.com/oss/202012/24/dc409a35ca465970a4474558ab5fd904.png)
手撸一个在线css三角形生成器
轻松使用纯css3打造有点意思的故障艺术
使用css3实现一个类在线直播的队列动画
css的border属性和border-radius属性
笔者在前面的文章中也分享过了如何利用border来实现不同的形状, 比如三角形, 如下为原理图:
![](https://s5.51cto.com/oss/202012/24/01ccb47d128d3353b5c4e34a6021e93f.png)
利用这个原理我们只要把元素的border-radius 设置为圆形(比如50%), 我们是不是就能实现一个饼图了呢? 我们来看看效果:
![](https://s4.51cto.com/oss/202012/24/42cf15692f7ef719e9d6901c8a477718.png)
以上是设置一个边的border-color的样子和设置四个边的border-color的样子, 所以说实现饼图用css就够用了. 代码如下:
- .rotate-animate {
- border:100px solid #f3f3f3;
- border-radius:50%;
- border-top:100px solid #2842d8;
- }
如果你想实现不同比例的饼图, 其实只要合理计算好border-width即可, 有了以上知识, 我们结合animation动画是不是可以实现下面的加载动画了?
css代码如下:
- .rotate-animate {
- border:100px solid #f3f3f3;
- border-radius:50%;
- border-top:100px solid #2842d8;
- animation:rotate 2s linear infinite;
- }
- @keyframes rotate{
- 0%{
- transform: rotate(0deg);
- }
- 100%{
- transform:rotate(360deg);
- }
- }
我们在做css3动画时经常会用到transform 和 animation, 所以建议大家把这两个属性掌握.
- 补充:如果要实现扇形, 是不是也很简单了?
实现更优雅的圆环加载动画
有了以上的css知识, 我们再来思考一下, 如何用最简短的代码实现一个圆环呢? 其实也很简单, 我们在上面用到了圆角和border来做圆形和饼图, 如果我们设置一个元素的宽度width和高度height, 并且背景透明(transparent), 会怎么样呢, 我们来看看:
代码如下:
- .rotate-animate {
- border:16px solid #f3f3f3;
- border-radius:50%;
- border-top:16px solid #2842d8;
- width:100px;
- height:100px;
- }
那么我们做圆环加载动画, 就非常简单了, 利用上面写的旋转动画, 我们来看看效果:
![图片](https://s2.51cto.com/oss/202012/24/48407da05a6c0d8e89d8ace37497b7aa.gif)
圆环加载动画的整代码如下:
- <style>
- .rotate-animate {
- border:16px solid #f3f3f3;
- border-radius:50%;
- border-top:16px solid #2842d8;
- width:100px;
- height:100px;
- animation:rotate 2s linear infinite;
- }
- .rotate-animate.fill-color {
- margin-left: 20px;
- border-color: #2842d8 #d1b516 #cf4928 #27c965;
- }
- @keyframes rotate{
- 0%{
- transform: rotate(0deg);
- }
- 100%{
- transform:rotate(360deg);
- }
- }
- </style>
- <!-- html -->
- <div class="rotate-animate"></div>
- <div class="rotate-animate fill-color"></div>
我们利用此特性还可以实现更多有意思的图案和加载动画, 大家可以细细品尝. 笔者这里推荐2篇比较使用的css文章:
相关文章
- 大数据浪潮下,前端工程师眼中的完整数据链图
- 物联网设备安全1.2 使用网站接口控制照明
- jQuery使用手册(收藏)
- HTML5的你应该记住的一些知识点
- JavaScript原型链和instanceof运算符的暧昧关系
- JavaScript中getter/setter的实现
- 看了《前端,我为什么不要你》有感
- 十个JavaScript中易犯的小错误,你中了几枪?
- JavaScript客户端检测技术详细解析
- 用C#开发ActiveX控件,并使用web调用
- 写给初学前端工程师的一封信
- 纠正前端开发中容易出错知识点
- 很有意思,如何把代码看成一个犯罪现场
- 前端开发者需要的10个Sublime插件
- 2015年2月编程语言排行榜:JavaScript排名达到历史最高
- 2015年1月编程语言排行榜:JavaScript摘得年度桂冠
- JS与设计模式之------策略模式Strategy
- 如何优雅的讨好程序员?
- Node.js 打造实时多人游戏框架
- 前端工程师应该具备的三种思维