Css圆角实现加载动画

本篇内容介绍了“Css圆角实现加载动画”的有关知识，在实际案例的操作过程中，不少人都会遇到这样的困境，接下来就让小编带领大家学习一下如何处理这些情况吧！希望大家仔细阅读，能够学有所成！

成都创新互联服务项目包括昭阳网站建设、昭阳网站制作、昭阳网页制作以及昭阳网络营销策划等。多年来，我们专注于互联网行业，利用自身积累的技术优势、行业经验、深度合作伙伴关系等，向广大中小型企业、政府机构等提供互联网行业的解决方案，昭阳网站推广取得了明显的社会效益与经济效益。目前，我们服务的客户以成都为中心已经辐射到昭阳省份的部分城市，未来相信会继续扩大服务区域并继续获得客户的支持与信任！

使用css3实现一个类在线直播的队列动画

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; }

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

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