grid布局实现loading动画效果

grid布局实现loading动画效果

html:

<div class="loading">
<span>1</span>
<span>2</span>
<span>3</span>
<span>4</span>
<span>5</span>
<span>6</span>
<span>7</span>
<span>8</span>
<span>9</span>
</div>

css:

*{
margin: 0;
padding: 0;
/* outline: 1px dashed red; */
}
html,body{
width: 100%;
height: 100%;
}
body{
background-color: black;
/* 将 body标签 转换成 弹性容器 */
display: flex;
display: -webkit-flex;
flex-direction: row;
/* 弹性容器---水平居中 */
justify-content: center;
/* 弹性容器---垂直居中 */
align-items: center;
}
.loading{
width: 10em;
height: 10em;
/* 将loading 转成 网格容器 */
display: grid;
/* 容器 划分 为 3列----
            repeat(3,1fr)---1fr 重复3次； repeat()接受两个参数，第一个参数是重复的次数，第二个参数是所要重复的值。
             */
/* grid-template-columns: repeat(3,1fr); */
grid-template-columns: 1fr 1fr 1fr;
/* 设置容器内 每个项目之间的间距 */
/* grid-column-gap: 0.5em;
            grid-row-gap: 0.5em; */
grid-gap: 0.5em;
}
.loading span{
color: #fff;
font-size: 20px;
background-color: var(--color);
}
/* 
        特别注意：下面这种写法，修饰的是 一组元素，不是单个元素。
        给当前 span标签为2n+2的元素，设置其背景颜色为：粉红色 
        n初始值为0
        n=0---2*0+2=2 表示，当前修饰的是9个span里的第2个span
        n=1---2*1+2=4 表示，当前修饰的是9个span里的第4个span
        n=2---2*2+2=6 表示，当前修饰的是9个span里的第6个span
        n=3---2*3+2=8 表示，当前修饰的是9个span里的第8个span
        n=4---2*4+2=10 ,这时，超出范围
        */
.loading span:nth-child(2n+2){
--color:#f13f84;
}
/* 
        n=0---4*0+3=3 表示，当前修饰的是9个span里的第3个span
        n=1---4*1+3=7 表示，当前修饰的是9个span里的第7个span
         */
.loading span:nth-child(4n+3){
--color:#46b0ff;

}
/* 
        n=0---4*0+1=1 表示，当前修饰的是9个span里的第1个span
        n=1---4*1+1=5 表示，当前修饰的是9个span里的第5个span
        n=2---4*2+1=9 表示，当前修饰的是9个span里的第9个span
         */
.loading span:nth-child(4n+1){
--color:#44bb44;
}
/* 让 loading这个容器，旋转 45度 */
.loading{
transform: rotate(45deg);
}
/* 给loading中的每一个span标签，添加 css3动画----让其旋转的同时，并且发生比例的缩放。 */

/* 
        
        ease-in-out 以慢速开始和结束的过渡效果
         */
.loading span{
/* animation: animate-run 2s var(--delay) ease-in-out infinite; */
/* animation: animate-run 2s ease-in-out infinite; */
/* animation-fill-mode: backwards; */
}
.loading span:nth-child(7){
--delay:0s;
}
/* 
        n=0---4*0+4=4 表示，当前修饰的是9个span里的第4个span
        n=1---4*1+4=8 表示，当前修饰的是9个span里的第8个span 
        */
.loading span:nth-child(4n+4){
--delay:0.2s;
}
/* 
        n=0---4*0+1=1 表示，当前修饰的是9个span里的第1个span
        n=1---4*1+1=5 表示，当前修饰的是9个span里的第5个span
        n=2---4*2+1=9 表示，当前修饰的是9个span里的第9个span
        */
.loading span:nth-child(4n+1){
--delay:0.4s;
}
/* 
        n=0---4*0+2=2 表示，当前修饰的是9个span里的第2个span
        n=1---4*1+2=6 表示，当前修饰的是9个span里的第6个span 
        */
.loading span:nth-child(4n+2){
--delay:0.6s;
}
.loading span:nth-child(3){
--delay:0.8s;
}

@keyframes animate-run{
0%, 20%{
transform: rotate(0) scale(0);
}
40%, 80%{
/* 360deg === 1turn 都表示 转1圈，或 转1周 */
/* transform: rotate(360deg) scale(1); */
transform: rotate(1turn) scale(1);
}
100%{
/* 到100%的时候（到2秒 结束的时候，再转1圈，并且图像缩放 到 看不见！） */
transform: rotate(2turn) scale(0);
}
}