用css3动画实现旋转的刷新按钮

css3样式

.refresh-icon {
  background-image: url('../images/refresh-icon.png');
  display: inline-block;
  height: 24px;
  width: 24px;
  vertical-align:middle;
  animation: spin 1s infinite linear;
  -moz-animation: spin 1s infinite linear
  -webkit-animation: spin 1s infinite linear;
  -o-animation: refreshing 1s infinite linear;
}

@-moz-keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

@-webkit-keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

@-o-keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

html文件：

  <i class="refresh-icon"></i>