box-shadow小运用
今天工作需要写一个loading，但是我网看到的都是很多个div拼在一起的，感觉这样的东西逼格不够高，所以我就想，可不可以单单一个div就解决问题，后来发现还真有！
我一口气写了8个格子，你以为有8个div?，错了 其实只有1个DIV
下面看看源码
<div class="box-shadow"> </div>
1 .box-shadow{ 2 transition:all 1s; 3 background: #000;box-shadow: 20px -20px 0 #111, 40px -40px 0 #222,60px -60px 0 #333,80px -80px 0 #444,100px -100px 0 #555,120px -120px 0 #666,140px -140px 0 #777; 4 transform: rotate(-45deg) translateX(150%); 5 animation: more 1s steps(5) infinite; 6 width:20px; 7 height: 20px; 8 border-radius: 10px; 9 } 10 @keyframes more { 11 from {background: #000;box-shadow: 20px -20px 0 #111, 40px -40px 0 #222,60px -60px 0 #333,80px -80px 0 #444,100px -100px 0 #555,120px -120px 0 #666,140px -140px 0 #777;} 12 12% {background: #777;box-shadow: 20px -20px 0 #000, 40px -40px 0 #111,60px -60px 0 #222,80px -80px 0 #333,100px -100px 0 #444,120px -120px 0 #555,140px -140px 0 #666;} 13 25% {background: #666;box-shadow: 20px -20px 0 #777, 40px -40px 0 #000,60px -60px 0 #111,80px -80px 0 #222,100px -100px 0 #333,120px -120px 0 #444,140px -140px 0 #555;} 14 37% {background: #555;box-shadow: 20px -20px 0 #666, 40px -40px 0 #777,60px -60px 0 #000,80px -80px 0 #111,100px -100px 0 #222,120px -120px 0 #333,140px -140px 0 #444;} 15 50% {background: #444;box-shadow: 20px -20px 0 #555, 40px -40px 0 #666,60px -60px 0 #777,80px -80px 0 #000,100px -100px 0 #111,120px -120px 0 #222,140px -140px 0 #333;} 16 62% {background: #333;box-shadow: 20px -20px 0 #444, 40px -40px 0 #555,60px -60px 0 #666,80px -80px 0 #777,100px -100px 0 #000,120px -120px 0 #111,140px -140px 0 #222;} 17 85% {background: #222;box-shadow: 20px -20px 0 #333, 40px -40px 0 #444,60px -60px 0 #555,80px -80px 0 #666,100px -100px 0 #777,120px -120px 0 #000,140px -140px 0 #111;} 18 to {background: #111;box-shadow: 20px -20px 0 #222, 40px -40px 0 #333,60px -60px 0 #444,80px -80px 0 #555,100px -100px 0 #666,120px -120px 0 #777,140px -140px 0 #000;} 19 }
我这样的命名方法是不科学的，各位按实际情况，请规范命名，小弟只是做个小随笔。
