写在前面
以前碰到1个小训练，便是用纯CSS3来写饼状的loading实际效果，以前着实沒有写过这玩意，小花彻底没思绪，随后参照了张鑫旭老师的CSS3完成鸡蛋饼饼状图loading等候转转转，也有些其他物品，用1种看起来有1点相近可是仿佛又不1样的方法进行了一样的实际效果，题型规定的大约便是这个模样：
刚开始
揣摩了1下，睡1觉起来画了个图，理顺了1下，但是觉得此图有点难会意啊啊啊啊啊，没事儿，小花会在后文1点1点解释哒~(红跟粉意味着色调，斜杠后边是z-index的值)
基本原理
这个物品分成两一部分：外圈和内圆。色调这物品都自定啦，但是我画的的圈圈仿佛有点太大，随后动漫時间是随意设的，总之转起看来着觉得有点怪怪的额
先上html构造
<div class="con-wrap">
<!--外圈-->
<div class="out-round"></div>
<!--内圆，里边有半圆4个-->
<div class="in-round">
<div class="lt-round"></div>
<div class="lt-mask"></div>
<div class="rt-round"></div>
<div class="rt-mask"></div>
</div>
</div>
外圈和内圆是根据position精准定位重叠在1起，本质上外圈转完2圈，内圆的鲜红色和粉色才各转完1圈（内圆的全程包含鲜红色从1到0、粉色从1到0），因此内圆的动漫時间应当是外圈的两倍！！！
1、外圈
外圈很简易，设定border-radius:50%便可画出1个圆，随后设定3条边框为鲜红色，此外1条为全透明，即画出了4分之3个圆边框（即外圆）。
.out-round {
width: 100px;
height: 100px;
border-radius: 50%;
margin: 150px auto;
border: 3px solid #FF298C;
border-left: 3px solid transparent;
animation: outRound 1s linear infinite running;
}
接下来是外圈的动漫，为其设定的动漫便是转动1圈，infinite表明无尽次
@keyframes outRound {
0% {
transform: rotate(120deg)
}
100% {
transform: rotate(⑵40deg)
}
}
在其中rotate(120deg)为转动起止部位，可依据具体状况调剂。
至另外圈就进行了，较为不便的是下面的内圆，但是依据图示应当是能够想像的。
2.内圆
此处有4个半圆，左侧两个，右侧两个（round为鲜红色，mask为粉色），动漫关键根据更改两个鲜红色半圆的z-index值来操纵各个半圆显示信息的优先选择次序。内圆的css完成一部分为：
/*左侧两个半圆*/
.lt-round, .lt-mask {
position: absolute;
width: 35px;
height: 70px;
border-radius: 35px 0 0 35px;
transform-origin: right center;
}
/*右侧两个半圆*/
.rt-round, .rt-mask {
position: absolute;
left: 50%;
width: 35px;
height: 70px;
border-radius: 0 35px 35px 0;
}
下面全过程叙述内圆的动漫全程（在其中右侧的粉色全程不必须动，右侧鲜红色一部分只必须更改z-index的值来更改显示信息的优先选择级，从而完成显示信息和掩藏的实际效果来相互配合填补左半边的圆。）：
1、原始设定：
红左 z-index：3 粉1 z-index：2 红右 z-index：1 粉2 z-index：0
实体模型图：
视觉效果实际效果图(忽视正中间的白线)：
2.左侧鲜红色转动完180度时（逆时针转动因此是360→180→0）
实体模型图：
视觉效果实际效果图：
3.左侧鲜红色转完到0度时（此时上下两侧的鲜红色半圆被粉色遮盖）
实体模型图：
视觉效果实际效果图：
4.粉色半圆反复以前鲜红色半圆的动漫（即左侧粉色360→180→0）
实体模型图：
视觉效果实际效果图：
5.当左侧粉色转动到0度时，所有半圆返回了最开始始的情况，全部动漫即进行（在同样時间下外圈进行了2次的动漫）。
实体模型图：
视觉效果实际效果图：
动漫编码一部分
1、前半程为左侧鲜红色转动1周，后半程为粉色转动1周。动漫完成以下：
/*左侧鲜红色进行第1圈的转动*/
@keyframes ltRound {
0% {
transform: rotate(360deg);
}
24.9% {
z-index: 3;
}
25% {
z-index: 1;
transform: rotate(180deg);
}
50% {
transform: rotate(0deg);
}
74.9% {
z-index: 1;
}
75%, 100% {
z-index: 3;
}
}
/*右侧鲜红色圆根据z-index来操纵显示信息和掩藏，从而做到在适度時间配上左半圆的实际效果*/
@keyframes rtRound {
0%, 24.9% {
z-index: 1;
}
25% {
z-index: ⑶;
}
74.9% {
z-index: ⑶;
}
75%, 100% {
z-index: 1;
}
}
/*左侧粉色进行第2圈的转动*/
@keyframes ltMask {
0%, 25%, 50% {
transform: rotate(360deg);
}
75% {
transform: rotate(180deg);
}
100% {
transform: rotate(0deg);
}
}
2.在所有编码未进行时，能够将动漫時间设大1点，这样便于观查，搞完了再设回去就OK了。
3.因为动漫是匀速转变的，可是z-index的值不可以匀速转变，因此只能在某个很短期内内去更改z-index的值。这样才可以做到实际效果（忽然觉得这类完成仿佛也并不是很好）
小结
没做适配，在chrome中无出现异常，其他我就不太了解了
源代码详细地址
以上便是本文的所有內容，期待对大伙儿的学习培训有一定的协助，也期待大伙儿多多适用脚本制作之家。
Copyright © 2002-2020 制作小程序_小程序商城_扫码点餐小程序_微信小程序开店的步骤_牛刀小程序 版权所有 （网站地图） 粤ICP备10235580号