巧用css圆角实现有点意思的加载动画

作为一名前端工程师, 需要对css技巧有充分的研究和了解, 接下来笔者将会带大家一起掌握如何用css的圆角属性来实现有点意思的加载动画.

如果想学习更多css实用技巧, 可以参考笔者以下的文章:

css的border属性和border-radius属性

笔者在前面的文章中也分享过了如何利用border来实现不同的形状, 比如三角形, 如下为原理图: 利用这个原理我们只要把元素的border-radius 设置为圆形(比如50%), 我们是不是就能实现一个饼图了呢? 我们来看看效果: 以上是设置一个边的border-color的样子和设置四个边的border-color的样子, 所以说实现饼图用css就够用了. 代码如下:

1.rotate-animate {
2    border:100px solid #f3f3f3;
3    border-radius:50%;
4    border-top:100px solid #2842d8;
5}

如果你想实现不同比例的饼图, 其实只要合理计算好border-width即可, 有了以上知识, 我们结合animation动画是不是可以实现下面的加载动画了?

css代码如下:

1.rotate-animate {
2    border:100px solid #f3f3f3;
3    border-radius:50%;
4    border-top:100px solid #2842d8;
5    animation:rotate 2s linear infinite;
6}
7@keyframes rotate{
8    0%{
9        transform: rotate(0deg);
10    }
11    100%{
12        transform:rotate(360deg);
13    }
14}

我们在做css3动画时经常会用到transform 和 animation, 所以建议大家把这两个属性掌握.

补充:如果要实现扇形, 是不是也很简单了?

实现更优雅的圆环加载动画

有了以上的css知识, 我们再来思考一下, 如何用最简短的代码实现一个圆环呢? 其实也很简单, 我们在上面用到了圆角和border来做圆形和饼图, 如果我们设置一个元素的宽度width和高度height, 并且背景透明(transparent), 会怎么样呢, 我们来看看:

代码如下:

1.rotate-animate {
2    border:16px solid #f3f3f3;
3    border-radius:50%;
4    border-top:16px solid #2842d8;
5    width:100px;
6    height:100px;
7}

那么我们做圆环加载动画, 就非常简单了, 利用上面写的旋转动画, 我们来看看效果:

圆环加载动画的整代码如下:

1<style>
2    .rotate-animate {
3        border:16px solid #f3f3f3;
4        border-radius:50%;
5        border-top:16px solid #2842d8;
6        width:100px;
7        height:100px;
8        animation:rotate 2s linear infinite;
9    }
10    .rotate-animate.fill-color {
11        margin-left: 20px;
12        border-color: #2842d8 #d1b516 #cf4928 #27c965;
13    }
14    @keyframes rotate{
15        0%{
16            transform: rotate(0deg);
17        }
18        100%{
19            transform:rotate(360deg);
20        }
21    }
22</style>
23<!-- html -->
24<div class="rotate-animate"></div>
25<div class="rotate-animate fill-color"></div>

我们利用此特性还可以实现更多有意思的图案和加载动画, 大家可以细细品尝. 笔者这里推荐2篇比较使用的css文章:

还有一些偏底层的css文章可以参考我之前的文章.

开源项目更新日志

目前H5-Dooring可视化搭建平台还在持续更新, 主要更新如下:

• 添加地图组件, 可自定义地理位置信息和标注
• 修复图片库不显示问题
• 添加日历组件
• 优化拖拽下载代码功能

<a href="https://github.com/MrXujiang/h5-Dooring" style="display:inline-block;width:80%;margin:0 auto"><img src="https://p1-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/43e5aa93261b4b9dbe8c24c5665db08e~tplv-k3u1fbpfcp-watermark.image" style="width: 100%; margin-bottom:10px;" />(H5编辑器)H5-Dooring | 积木式搭建H5页面</a>

往期推荐

复盘node项目中遇到的13+常见问题和解决方案

如何搭积木式的快速开发H5页面?

手撸一个在线css三角形生成器

前端高效开发必备的 js 库梳理

觉得有用 ？喜欢就收藏，顺便点个赞吧，你的支持是我最大的鼓励！微信搜 “趣谈前端”，发现更多有趣的H5游戏, webpack，node，gulp，css3，javascript，nodeJS，canvas数据可视化等前端知识和实战.