79 lines
1.7 KiB
CSS
79 lines
1.7 KiB
CSS
body{
|
||
margin: 0;
|
||
padding: 0;
|
||
height: 100vh;
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
background: linear-gradient(200deg,#f4efef,#e3eeff);
|
||
}
|
||
.loading{
|
||
width: 200px;
|
||
height: 200px;
|
||
display: grid;
|
||
/* 制作3列的网格容器 */
|
||
grid-template-columns: repeat(3,1fr);
|
||
/* 设置行与列之间的间隙 */
|
||
grid-gap: 10px;
|
||
/* 对子部分进行编号 */
|
||
/* counter-reset: number; */
|
||
/* 旋转45度 */
|
||
transform: rotate(45deg);
|
||
}
|
||
.loading span{
|
||
/* 自定义属性 */
|
||
--c:red;
|
||
/* 调用var函数使用自定义属性--c */
|
||
background-color: var(--c);
|
||
position: relative;
|
||
transform: rotate(0);
|
||
/* 执行动画：动画 时长 线性的 无限次播放 */
|
||
animation: blinking 2s linear infinite;
|
||
/* 动画延迟 */
|
||
animation-delay: var(--d);
|
||
}
|
||
.loading span::before{
|
||
/* 设置增量 */
|
||
/* counter-increment: number; */
|
||
/* 将编号赋值到content，这里有助于我们根据编号设置样式 */
|
||
/* content: counter(number); */
|
||
color: #fff;
|
||
position: absolute;
|
||
width: 100%;
|
||
height: 100%;
|
||
}
|
||
.loading span:nth-child(7){
|
||
--c:#f15a5a;
|
||
--d:0s;
|
||
}
|
||
.loading span:nth-child(4),
|
||
.loading span:nth-child(8){
|
||
--c:#f0c419;
|
||
--d:0.2s;
|
||
}
|
||
.loading span:nth-child(1),
|
||
.loading span:nth-child(5),
|
||
.loading span:nth-child(9){
|
||
--c:#4eba6f;
|
||
--d:0.4s;
|
||
}
|
||
.loading span:nth-child(2),
|
||
.loading span:nth-child(6){
|
||
--c:#2d95bf;
|
||
--d:0.6s;
|
||
}
|
||
.loading span:nth-child(3){
|
||
--c:#955ba5;
|
||
--d:0.8s;
|
||
/* 到这里基本完成了，我们来吧编号去掉吧 */
|
||
}
|
||
|
||
/* 定义动画 缩放 */
|
||
@keyframes blinking{
|
||
0%,100%{
|
||
transform: scale(0);
|
||
}
|
||
40%,80%{
|
||
transform: scale(1);
|
||
}
|
||
} |