今晚吃完饭回宿舍又捣鼓了另外几种Loading效果，老规矩，直接“上菜“……注：gif图片动画有些卡顿，非实际效果！PS：若要转载请注明出处，尊重一下作者！第一种效果：代码如下：.loading{width:80px;height:40px;margin:0 auto;margin-top:100px;}.loading span{display:inline-block;width:8px;height:100%;border-radius:4px;background:lightgreen;-webkit-animation:load 1.04s ease infinite;}@-webkit-keyframes load{0%,100%{height:40px;background:lightgreen;}50%{height:60px;margin-top:-20px;background:lightblue;}}.loading span:nth-child(2){-webkit-animation-delay:0.13s;}.loading span:nth-child(3){-webkit-animation-delay:0.26s;}.loading span:nth-child(4){-webkit-animation-delay:0.39s;}.loading span:nth-child(5){-webkit-animation-delay:0.52s;}第二种效果：代码如下：.loading{width:80px;height:80px;border-radius:50%;margin:0 auto;margin-top:100px;position:relative;border:5px solid lightgreen;-webkit-animation:turn 2s linear infinite;}.loading span{display:inline-block;width:30px;height:30px;border-radius:50%;background:lightgreen;position:absolute;left:50%;margin-top:-15px;margin-left:-15px;-webkit-animation:changeBgColor 2s linear infinite;}@-webkit-keyframes changeBgColor{0%{background:lightgreen;}100%{background:lightblue;}}@-webkit-keyframes turn{0%{-webkit-transform:rotate(0deg);border-color:lightgreen;}100%{-webkit-transform:rotate(360deg);border-color:lightblue;}}第三种效果：代码如下：.loading{width:150px;height:15px;margin:0 auto;margin-top:100px;text-align:center;}.loading span{display:inline-block;width:15px;height:100%;margin-right:5px;background:lightgreen;-webkit-animation:load 1.04s ease infinite;}.loading span:last-child{margin-right:0px;}@-webkit-keyframes load{0%{opacity:1;-webkit-transform:scale(1.2);}100%{opacity:.2;-webkit-transform:scale(.2);}}.loading span:nth-child(1){-webkit-animation-delay:0.13s;}.loading span:nth-child(2){-webkit-animation-delay:0.26s;}.loading span:nth-child(3){-webkit-animation-delay:0.39s;}.loading span:nth-child(4){-webkit-animation-delay:0.52s;}.loading span:nth-child(5){-webkit-animation-delay:0.65s;}第四种效果：代码如下：.loading{width:150px;height:8px;border-radius:4px;margin:0 auto;margin-top:100px;position:relative;background:lightblue;overflow:hidden;}.loading span{display:block;width:100%;height:100%;border-radius:3px;background:lightgreen;-webkit-animation:changePosition 4s linear infinite;}@-webkit-keyframes changePosition{0%{-webkit-transform:translate(-150px);}50%{-webkit-transform:translate(0);}100%{-webkit-transform:translate(150px);}}第五种效果：代码如下：.loading{width:200px;height:60px;margin:0 auto;margin-top:100px;position:relative;}.loading span{width:50px;height:30px;border-radius:50%;background:lightgreen;position:absolute;top:50%;margin-top:-15px;overflow:hidden;-webkit-animation:changePosition 2.08s linear infinite;}@-webkit-keyframes changePosition{0%,100%{-webkit-transform:translate(70px);}20%{width:50px;height:30px;margin-top:-15px;-webkit-transform:translate(0px);}30%{width:20px;height:60px;margin-top:-30px;-webkit-transform:translate(0px);}35%{width:50px;height:30px;margin-top:-15px;-webkit-transform:translate(5px);background:lightblue;}70%{width:50px;height:30px;margin-top:-15px;-webkit-transform:translate(160px);}80%{width:20px;height:60px;margin-top:-30px;-webkit-transform:translate(160px);}85%{width:50px;height:30px;margin-top:-15px;-webkit-transform:translate(155px);background:lightgreen;}}第六种效果：代码如下：.loadEffect{width:100px;height:100px;position:relative;margin:0 auto;margin-top:100px;}.loadEffect span{display:inline-block;width:30px;height:10px;border-top-left-radius:5px;border-bottom-left-radius:5px;background:lightgreen;position:absolute;-webkit-animation:load 1.04s ease infinite;}@-webkit-keyframes load{0%{opacity:1;}100%{opacity:0.2;}}.loadEffect span:nth-child(1){left:0;top:50%;margin-top:-5px;-webkit-animation-delay:0.13s;}.loadEffect span:nth-child(2){left:10px;top:20px;-webkit-transform:rotate(45deg);-webkit-animation-delay:0.26s;}.loadEffect span:nth-child(3){left:50%;top:10px;margin-left:-15px;-webkit-transform:rotate(90deg);-webkit-animation-delay:0.39s;}.loadEffect span:nth-child(4){top:20px;right:10px;-webkit-transform:rotate(135deg);-webkit-animation-delay:0.52s;}.loadEffect span:nth-child(5){right:0;top:50%;margin-top:-5px;-webkit-transform:rotate(180deg);-webkit-animation-delay:0.65s;}.loadEffect span:nth-child(6){right:10px;bottom:20px;-webkit-transform:rotate(225deg);-webkit-animation-delay:0.78s;}.loadEffect span:nth-child(7){bottom:10px;left:50%;margin-left:-15px;-webkit-transform:rotate(270deg);-webkit-animation-delay:0.91s;}.loadEffect span:nth-child(8){bottom:20px;left:10px;-webkit-transform:rotate(315deg);-webkit-animation-delay:1.04s;}第七种效果：代码如下：

.loadEffect{width:100px;height:100px;margin:0 auto;margin-top:100px;position:relative;}.loadEffect div{width:100%;height:100%;position:absolute;-webkit-animation:load 2.08s linear infinite;}.loadEffect div span{display:inline-block;width:20px;height:20px;border-radius:50%;background:lightgreen;position:absolute;left:50%;margin-top:-10px;margin-left:-10px;}@-webkit-keyframes load{0%{-webkit-transform:rotate(0deg);}10%{-webkit-transform:rotate(45deg);}50%{opacity:1;-webkit-transform:rotate(160deg);}62%{opacity:0;}65%{opacity:0;-webkit-transform:rotate(200deg);}90%{-webkit-transform:rotate(340deg);}100%{-webkit-transform:rotate(360deg);}}.loadEffect div:nth-child(1){-webkit-animation-delay:0.2s;}.loadEffect div:nth-child(2){-webkit-animation-delay:0.4s;}.loadEffect div:nth-child(3){-webkit-animation-delay:0.6s;}.loadEffect div:nth-child(4){-webkit-animation-delay:0.8s;}第八种效果：代码如下：

.loading{width:60px;height:60px;margin:0 auto;margin-top:100px;position:relative;-webkit-animation:load 3s linear infinite;}.loading div{width:100%;height:100%;position:absolute;}.loading span{display:inline-block;width:20px;height:20px;border-radius:50%;background:#99CC66;position:absolute;left:50%;margin-top:-10px;margin-left:-10px;-webkit-animation:changeBgColor 3s ease infinite;}@-webkit-keyframes load{0%{-webkit-transform:rotate(0deg);}33.3%{-webkit-transform:rotate(120deg);}66.6%{-webkit-transform:rotate(240deg);}100%{-webkit-transform:rotate(360deg);}}@-webkit-keyframes changeBgColor{0%,100%{background:#99CC66;}33.3%{background:#FFFF66;}66.6%{background:#FF6666;}}.loading div:nth-child(2){-webkit-transform:rotate(120deg);}.loading div:nth-child(3){-webkit-transform:rotate(240deg);}.loading div:nth-child(2) span{-webkit-animation-delay:1s;}.loading div:nth-child(3) span{-webkit-animation-delay:2s;}PS：同样的，CSS样式代码没怎么整理，虽然东西简单，但是也是需要一些时间去做出来。所以，欢迎转载和使用，不过转载还是得注明一下出处，谢谢！本文链接：CSS3实现8种Loading效果【第二波】，转载请注明。