《GitHub精选》是我们分享Github中优质项目的栏目，包括技术、学习、实用与各种有趣的内容。本期推荐的是一个使用纯CSS实现动画加载效果的项目——SpinKit。

SpinKit通过使用transform和opacity属性实现了包括方块翻转、圆点旋转、圆环缩放和九宫格渐变等10余种动画加载的效果。

部分效果代码：

方块折叠

<div class="sk-folding-cube">  <div class="sk-cube1 sk-cube"></div>  <div class="sk-cube2 sk-cube"></div>  <div class="sk-cube4 sk-cube"></div>  <div class="sk-cube3 sk-cube"></div></div>

.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;   }}

<div class="spinner">  <div class="bounce1"></div>  <div class="bounce2"></div>  <div class="bounce3"></div></div>

.spinner {  margin: 100px auto 0;  width: 70px;  text-align: center;}.spinner > div {  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: