//设置元素组件的大小为它所在的父元素的大小应用。my_loading{位置：绝对；顶部：0%；z-指数：10；背景色：#13aa52；高度：100%；width:100%;}.loading_box{//用于居中旋转元素display:flex;对齐项目：居中；证明内容：周围空间；弹性方向：列；弹性包装：nowrap；宽度：100%；高度：100%；//旋转类型封装//旋转类型1：单张（叶子显示）.shuye{position:absolute;顶部：0%；animation:loading1sinfinite;//动作的名字是loading-webkit-animation:loading1sinfinite;位置：绝对；变换原点：50%50px；//元素基础位置从50%开始，大小为50px}//RotateType2:multiple(小圆点显示).circle{position:absolute;顶部：0%；//设置白点的整体风格li{position:absolute;宽度：8px；高度：8px；边界半径：4px；背景色：#ffffff；}//设置第一个延迟为0.125li:nth-child(1){animation:loading1sinfinite0.125s;//第一个是动画名称，第二个是动画移动时间，第三个是永久属性，即动画永远持续，第四个参数设置为delay-webkit-animation:loading1sinfinite0.125s；位置：绝对；变换原点：50%50px；//元素基点从50%开始，大小为50px}//设置第二个延迟0.25li:nth-child(2){animation:loading1sinfinite0.25s;-webkit-animation:loading1sinfinite0.25s;位置：绝对；变换原点：50%50px；//元素基点从50%开始，大小为50px}//设置第三次延迟0.375li:nth-child(3){动画：loading1sinfinite0.375s;-webkit-animation:loading1sinfinite0.375s;位置：绝对；变换原点：50%50px；//元素基础位置为50%，大小为50px}//设置第四个延迟0.5li:nth-child(4){animation:loading1sinfinite0.5s;-webkit-animation:loading1sinfinite0.5s;位置：绝对；变换原点：50%50px；//元素基础位置为50%，大小为50px}}}//动画效果，旋转度数@keyframesloading{to{transform:rotate(1turn);}}一、入门知识储备：1.transform:rotate(1turn)transform:rotate(1turn);`相当于`变换：旋转（360度）；2.transform-origintransform-Origin属性允许你改变转换元素的位置。用于设置元素移动的基点，即起点css代码：//设置元素组件的大小为它所在的父元素的大小应用。my_loading{位置：绝对；顶部：0%；z-指数：10；背景色：#13aa52；高度：100%；width:100%;}.loading_box{//用于居中旋转元素display:flex;对齐项目：居中；证明内容：周围空间；弹性方向：列；弹性包装：nowrap；宽度：100%；高度：100%；//旋转类型封装//旋转类型1：单张（叶子显示）.shuye{position:absolute;顶部：0%；animation:loading1sinfinite;//动作的名字是loading-webkit-animation:loading1sinfinite;位置：绝对；变换原点：50%50px；//元素基础位置从50%开始，大小为50px}//RotateType2:multiple(小圆点显示).circle{position:absolute;顶部：0%；//设置白点的整体风格li{position:absolute;宽度：8px；高度：8px；边界半径：4px；背景色：#ffffff；}//设置第一个延迟为0.125li:nth-child(1){animation:loading1sinfinite0.125s;//第一个是动画名称，第二个是动画移动时间，第三个是永久属性，即动画永远持续，第四个参数设置为delay-webkit-animation:loading1sinfinite0.125s；位置：绝对；变换原点：50%50px；//元素基点从50%开始，大小为50px}//设置第二个延迟0.25li:nth-child(2){animation:loading1sinfinite0.25s;-webkit-animation:loading1sinfinite0.25s;位置：绝对；变换原点：50%50px；//元素基点从50%开始，大小为50px}//设置第三次延迟0.375li:nth-child(3){动画：loading1sinfinite0.375s;-webkit-animation:loading1sinfinite0.375s;位置：绝对；变换原点：50%50px；//元素基础位置为50%，大小为50px}//设置第四个延迟0.5li:nth-child(4){animation:loading1sinfinite0.5s;-webkit-animation:loading1sinfinite0.5s;位置：绝对；变换原点：50%50px；//元素基础位置为50%，大小为50px}}}//动画效果，旋转度数@keyframesloading{to{transform:rotate(1turn);}}结果：HTML和JS代码：{{num}}%
