box-shadow + animation 实现loading
![](https://images2015.cnblogs.com/blog/886955/201601/886955-20160126105127098-1763857829.jpg)
.loading{ width:3px; height:3px; border-radius:100%; margin-left:20px;
box-shadow:0 -10px 0 1px #333,10px 0px #333,0 10px #333,-10px 0 #333,-7px -7px 0 .5px #333,7px -7px 0 1.5px #333,7px 7px #333,-7px 7px #333;}
.spin{
-webkit-transform: rotate(360deg);
-webkit-animation:spin 1s linear infinite;
}
@-webkit-keyframes spin{
from{-webkit-transform:rotate(0deg);}
to{-webkit-transform:rotate(360deg);}
}
.spin{
transform: rotate(360deg);
animation:spin 1s linear infinite;
}
@keyframes spin{
from{transform:rotate(0deg);}
to{transform:rotate(360deg);}
}
box-shadow:0 -10px 0 1px #333,10px 0px #333,0 10px #333,-10px 0 #333,-7px -7px 0 .5px #333,7px -7px 0 1.5px #333,7px 7px #333,-7px 7px #333;}
.spin{
-webkit-transform: rotate(360deg);
-webkit-animation:spin 1s linear infinite;
}
@-webkit-keyframes spin{
from{-webkit-transform:rotate(0deg);}
to{-webkit-transform:rotate(360deg);}
}
.spin{
transform: rotate(360deg);
animation:spin 1s linear infinite;
}
@keyframes spin{
from{transform:rotate(0deg);}
to{transform:rotate(360deg);}
}
无限循环的CSS都是使用 spin 作为类名以及动画关键字,约定俗成的使用