百度前端技术学院是一个为大学生创办的免费的前端技术实践、分享、交流平台。由百度校园招聘组、百度校园品牌部、百度前端技术部以及多个百度的前端团队联合创办。学院组织了一批百度在职工程师,精心编写了数十个实践编码任务,将技术知识点系统有机地串联在各个充满趣味与挑战的任务中,同学们通过实际地编码练习来掌握知识,再辅以互相评价、学习笔记等方式,加深对于学习内容的理解。在过去的三年中,百度前端技术学院累积吸引了上万名同学参加,并且有数十名同学在学习后,顺利加入了百度,成为了百度的前端工程师。

圆环半圆和动画实现思路

作者李宗原课程CSS3饼状loading效果2450次浏览32017-02-27 19:01

实现3 / 4圆环

我们假设要创建的圆环节点的半径为R,首先是将div变成圆环。

{
    border: solid color 2px;
    border-radius: R / 2 px;
}

接下来我们将圆环设为3 / 4圆环。想想一个div节点,如果我们只为其设置3边的border,那么不就是3 / 4矩形环吗,那么圆环呢?试一下。

{
    border: solid color 2px;
    border-radius: R / 2 px;
    border-top-color: transparent;
}

果然和我们想的一样,这下圆环就完成了。

实现圆饼

先来看看效果图,先是从一个红的圆逐渐变为粉色的圆,然后是从粉丝的圆变成了红色的圆,以此循环下去......该怎么实现?这里我们创建两个半圆分别为红色和粉丝,和一个整圆一半红色一半粉色,接下来画圆。

{
    width: 100px;
    height: 100px;
    border-radius: 50px;
    background-color: color;
}

等等,这是一个整圆,怎么变成半圆?或者说把半边的颜色去掉?这里我们这么写,我们不设置div的宽和高,我们用 border来填充圆(毕竟我们css也就border这些分为border-left, border-right.....)

{
    width: 0;
    height: 0;
    border: solid color 50px  /* 这里的50就是我们半圆的半径了 */
    border-top-color: transparent;
    border-left-color: transparent;
}

好了两个半圆画完了,接下来的整圆也同理,只需要一遍的border为红另一边的border为粉就可以了。接下来我们就该考虑如何组合这三个圆来实现动画了。

圆饼动画

好,我们看着效果图一步一步分析。
首先是一整个红圆,我们将两个半圆叠在一起,红色在上,粉色在下,另一边露出整圆的红色那半面。
接下来红圆逐渐变为粉圆,这里我们将粉半圆逐渐旋转180度,这时候就一半一半了,然后呢?旋转下面的整圆让粉色的旋转出来?不不,这样子动画就得转3个圆了,还得一直改z-index,我们尽可能的让执行动画的节点变少,我们这里讲红半圆的z-index改一下,让它旋转180度到红半圆的下面,这样子他们下面的整圆的粉色部分不就逐渐露出来了吗?这下不正好实现了半个动画吗。接下来就旋转粉半圆180度,让它下面的红半圆逐渐露出来,然后是改变红半圆的z-index 让其在最上然后接着180......然后循环上面的步骤就可以了。

好了大功告成!

我的代码:https://github.com/LNoe-lzy/baiduCourse/blob/master/course6/index.html

0条评论