需求：

让下面的图片绿色的箭头框按顺时针做360度旋转，文字保持不动。

旋转.png
用css3实现这种需求so easy，当然有人会说用gif图更方便，的确gif图很方便这点不否认
好了言归正传上代码：

html:

<div class="run_icon">
     <img class="runImg" src="../../assets/image/coolStationImg/run_icon.png" alt="运行">
     <div class="run_text">运行</div>
</div>

css:

.run_icon {
                margin-top: 50px;
                margin-left: 50px;
                position: relative;
                display: flex;
                font-size: 14px;
                color: rgba(51, 198, 124, 1);
                height: 80px;
                width: 80px;
                .runImg {
                  -webkit-animation: rotateImg 2s linear infinite;
                  height: 70px;
                  width: 70px;
                  vertical-align: middle;
                }
                .run_text {
                  position: absolute;
                  top: 25px;
                  left: 22px;
                  z-index: 3;
                }
              }
              @keyframes rotateImg {
                0% {transform : rotate(0deg);}
                100% {transform : rotate(360deg);}
              }

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