数据可视化大屏项目中，会给图标增加一些旋转动画效果作为装饰，今天通过css来实现一个旋转动画效果。

动画效果

<div class="icons">
    <div class="iconBg"></div>
</div>

css

.icons {
    width: 50px;
    height: 50px;
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: nowrap;
    flex-direction: row;
    align-content: flex-start;
    flex-shrink: 0;
    margin-left: 5px;

    .iconBg {
      animation: rotateIcon 2s linear infinite; /* 旋转动画，每2秒完成一个360度旋转，并且会无限次重复 */
      position: absolute;
      width: 100%;
      height: 100%;
      background: url("../assets/icon_bg.png");
      background-size: 100% 100%;
    }

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