css的border属性和border-radius属性

笔者在前面的文章中也分享过了如何应用border来完成不同的外形, 比如三角形, 如下为原理图:

应用这个原理我们只需把元素的border-radius 设置为圆形(比如50%), 我们是不是就能完成一个饼图了呢? 我们来看看效果:

以上是设置一个边的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; 

} 

那么我们做圆环加载动画, 就十分复杂了, 应用下面写的旋转动画, 我们来看看效果:

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

我们应用此特性还可以完成更多有意思的图案和加载动画, 大家可以细细品味.

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

开源项目更新日志

目前H5-Dooring可视化搭建平台还在继续更新, 主要更新如下: 添加地图组件, 可自定义天文位置信息和标注 修复图片库不显示成绩 添加日历组件 优化拖拽下载代码功用

【编辑引荐】

前端百题斩之网络七层模型及HTTP退化史

维基百科采用 Vue.js 作为前端框架

前端百题斩之一文了解HTTP缓存

你能够不知道，前端这五个有用的技术可以这么酷！

顺序员开发进度太慢被告上法庭！公司索赔90万，拿百度词条当证据

(责任编辑：admin)