GitHub精选使用纯CSS实现动画加载效果

　　《GitHub精选》是我们分享Github中优质项目的栏目，包括技术、学习、实用与各种有趣的内容。本期推荐的是一个使用纯CSS实现动画加载效果的项目——SpinKit。
　　SpinKit通过使用transform和opacity属性实现了包括方块翻转、圆点旋转、圆环缩放和九宫格渐变等10余种动画加载的效果。
　　部分效果代码：方块折叠             .sk-folding-cube {   margin: 20px auto;   width: 40px;   height: 40px;   position: relative;   -webkit-transform: rotateZ(45deg);           transform: rotateZ(45deg); }  .sk-folding-cube .sk-cube {   float: left;   width: 50%;   height: 50%;   position: relative;   -webkit-transform: scale(1.1);       -ms-transform: scale(1.1);           transform: scale(1.1);  } .sk-folding-cube .sk-cube:before {   content: ＂＂;   position: absolute;   top: 0;   left: 0;   width: 100%;   height: 100%;   background-color: #333;   -webkit-animation: sk-foldCubeAngle 2.4s infinite linear both;           animation: sk-foldCubeAngle 2.4s infinite linear both;   -webkit-transform-origin: 100% 100%;       -ms-transform-origin: 100% 100%;           transform-origin: 100% 100%; } .sk-folding-cube .sk-cube2 {   -webkit-transform: scale(1.1) rotateZ(90deg);           transform: scale(1.1) rotateZ(90deg); } .sk-folding-cube .sk-cube3 {   -webkit-transform: scale(1.1) rotateZ(180deg);           transform: scale(1.1) rotateZ(180deg); } .sk-folding-cube .sk-cube4 {   -webkit-transform: scale(1.1) rotateZ(270deg);           transform: scale(1.1) rotateZ(270deg); } .sk-folding-cube .sk-cube2:before {   -webkit-animation-delay: 0.3s;           animation-delay: 0.3s; } .sk-folding-cube .sk-cube3:before {   -webkit-animation-delay: 0.6s;           animation-delay: 0.6s;  } .sk-folding-cube .sk-cube4:before {   -webkit-animation-delay: 0.9s;           animation-delay: 0.9s; } @-webkit-keyframes sk-foldCubeAngle {   0%, 10% {     -webkit-transform: perspective(140px) rotateX(-180deg);             transform: perspective(140px) rotateX(-180deg);     opacity: 0;    } 25%, 75% {     -webkit-transform: perspective(140px) rotateX(0deg);             transform: perspective(140px) rotateX(0deg);     opacity: 1;    } 90%, 100% {     -webkit-transform: perspective(140px) rotateY(180deg);             transform: perspective(140px) rotateY(180deg);     opacity: 0;    }  }  @keyframes sk-foldCubeAngle {   0%, 10% {     -webkit-transform: perspective(140px) rotateX(-180deg);             transform: perspective(140px) rotateX(-180deg);     opacity: 0;    } 25%, 75% {     -webkit-transform: perspective(140px) rotateX(0deg);             transform: perspective(140px) rotateX(0deg);     opacity: 1;    } 90%, 100% {     -webkit-transform: perspective(140px) rotateY(180deg);             transform: perspective(140px) rotateY(180deg);     opacity: 0;    } }
　　三点渐变          .spinner {   margin: 100px auto 0;   width: 70px;   text-align: center; }  .spinner > p {   width: 18px;   height: 18px;   background-color: #333;    border-radius: 100%;   display: inline-block;   -webkit-animation: sk-bouncedelay 1.4s infinite ease-in-out both;   animation: sk-bouncedelay 1.4s infinite ease-in-out both; }  .spinner .bounce1 {   -webkit-animation-delay: -0.32s;   animation-delay: -0.32s; }  .spinner .bounce2 {   -webkit-animation-delay: -0.16s;   animation-delay: -0.16s; }  @-webkit-keyframes sk-bouncedelay {   0%, 80%, 100% { -webkit-transform: scale(0) }   40% { -webkit-transform: scale(1.0) } }  @keyframes sk-bouncedelay {   0%, 80%, 100% {      -webkit-transform: scale(0);     transform: scale(0);   } 40% {      -webkit-transform: scale(1.0);     transform: scale(1.0);   } }
　　其他效果：
　　GitHub: https://github.com/tobiasahlin/SpinKit