代码解读

 

　　定义dom，一个容器中包含9个子元素：

 

　　<divclass="loader">

 

　　<span></span>

 

　　<span></span>

 

　　<span></span>

 

　　<span></span>

 

　　<span></span>

 

　　<span></span>

 

　　<span></span>

 

　　<span></span>

 

　　<span></span>

 

　　</div>

 

　　居中显示：

 

　　body{

 

　　margin:0;

 

　　height:100vh;

 

　　display:flex;

 

　　align-items:center;

 

　　justify-content:center;

 

　　background-color:black;

 

　　}

 

　　定义容器和子元素尺寸，是一个大正方形里包含9个小正方形：

 

　　.loader{

 

　　width:10em;

 

　　height:10em;

 

　　display:grid;

 

　　grid-template-columns:repeat(3,1fr);

 

　　grid-gap:0.5em;

 

　　}

 

　　把图案调整为大菱形中包含9个小菱形：

 

　　.loader{

 

　　transform:rotate(45deg);

 

　　}

 

　　以竖向的小菱形为单位，为小菱形块上色：

 

　　

 

　　.loaderspan{

 

　　background-color:var(--c);

 

　　}

 

　　.loaderspan:nth-child(7){

 

　　--c:tomato;

 

　　}

 

　　.loaderspan:nth-child(4),

 

　　.loaderspan:nth-child(8){

 

　　--c:gold;

 

　　}

 

　　.loaderspan:nth-child(1),

 

　　.loaderspan:nth-child(5),

 

　　.loaderspan:nth-child(9){

 

　　--c:limegreen;

 

　　}

 

　　.loaderspan:nth-child(2),

 

　　.loaderspan:nth-child(6){

 

　　--c:dodgerblue;

 

　　}

 

　　.loaderspan:nth-child(3){

 

　　--c:mediumpurple;

 

　　}

 

　　定义动画效果：

 

　　

 

　　.loaderspan{

 

　　animation:blinking2slinearinfinite;

 

　　animation-delay:var(--d);

 

　　transform:scale(0);

 

　　}

 

　　@keyframesblinking{

 

　　0%,100%{

 

　　transform:scale(0);

 

　　}

 

　　40%,80%{

 

　　transform:scale(1);

 

　　}

 

　　}

 

　　最后，为小菱形设置时延，增强动感：

 

　　

 

　　.loaderspan:nth-child(7){

 

　　--d:0s;

 

　　}

 

　　.loaderspan:nth-child(4),

 

　　.loaderspan:nth-child(8){

 

　　--d:0.2s;

 

　　}

 

　　.loaderspan:nth-child(1),

 

　　.loaderspan:nth-child(5),

 

　　.loaderspan:nth-child(9){

 

　　--d:0.4s;

 

　　}

 

　　.loaderspan:nth-child(2),

 

　　.loaderspan:nth-child(6){

 

　　--d:0.6s;

 

　　}

 

　　.loaderspan:nth-child(3){

 

　　--d:0.8s;

 

　　}

 

　　大功告成！








本文转载自中文网