仅旋转背景图片

Question

我试图仅旋转按钮中的图标。但是有了我的代码，一切都在旋转。我希望只有图标会旋转。我无法编辑HTML。

.x-toolbar-cell, .x-toolbar td{
  vertical-align: middle
}

.x-toolbar div, .x-toolbar input, .x-toolbar label, .x-toolbar select, .x-toolbar span, .x-toolbar td{
  font: 400 11px arial, tahoma, helvetica, sans-serif
}

.x-btn-mc, .x-form .x-form-btns-ct .x-form-btns-center, .x-toolbar-right td{
  text-align: center
}

.x-btn, .x-btn-mc, .x-btn-text, .x-toolbar div, .x-toolbar input, .x-toolbar label, .x-toolbar select, .x-toolbar span, .x-toolbar td{
  white-space: nowrap
}


.x-btn .x-deluge-downloading, .x-deluge-downloading, .x-deluge-peer{
  background-image: url(https://i.imgur.com/Pb9FZdc.png);
  
}

.x-btn-text-icon .x-btn-icon-small-left .x-btn-text{
  background-position:0 center;
  background-repeat: no-repeat;
  
}


.x-deluge-downloading{
    -webkit-animation:spin 4s linear infinite;
    -moz-animation:spin 4s linear infinite;
    animation:spin 4s linear infinite;   
}

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

<td class="x-toolbar-cell" id="ext-gen149">
   <table id="statusbar-downspeed" cellspacing="0" class="x-btn x-btn-text-icon" style="width: auto;">
      <tbody class="x-btn-small x-btn-icon-small-left">
         <tr>
            <td class="x-btn-tl"><i>&nbsp;</i></td>
            <td class="x-btn-tc"></td>
            <td class="x-btn-tr"><i>&nbsp;</i></td>
         </tr>
         <tr>
            <td class="x-btn-ml"><i>&nbsp;</i></td>
            <td class="x-btn-mc"><em class="x-btn-arrow" unselectable="on">
                <button style="width:50px;height:50px" type="button" id="ext-gen150" class=" x-btn-text x-deluge-downloading"></button></em></td>
            <td class="x-btn-mr"><i>&nbsp;</i></td>
         </tr>
         <tr>
            <td class="x-btn-bl"><i>&nbsp;</i></td>
            <td class="x-btn-bc"></td>
            <td class="x-btn-br"><i>&nbsp;</i></td>
         </tr>
      </tbody>
   </table>
</td>

Answer 1

不应将动画应用于按钮。应该应用于内部的div。

.x-toolbar-cell, .x-toolbar td{
  vertical-align: middle
}

.x-toolbar div, .x-toolbar input, .x-toolbar label, .x-toolbar select, .x-toolbar span, .x-toolbar td{
  font: 400 11px arial, tahoma, helvetica, sans-serif
}

.x-btn-mc, .x-form .x-form-btns-ct .x-form-btns-center, .x-toolbar-right td{
  text-align: center
}

.x-btn, .x-btn-mc, .x-btn-text, .x-toolbar div, .x-toolbar input, .x-toolbar label, .x-toolbar select, .x-toolbar span, .x-toolbar td{
  white-space: nowrap
}


.x-deluge-downloading{
  position:relative;
  display:flex;
  justify-content:center;
  align-items:center;
}
.x-deluge-downloading div {
    background-image: url("https://i.imgur.com/Pb9FZdc.png");
  height:16px;
  width:16px;
-webkit-animation:spin 4s linear infinite;
    -moz-animation:spin 4s linear infinite;
    animation:spin 4s linear infinite;  
}

.x-btn-text-icon .x-btn-icon-small-left .x-btn-text{
  background-position:0 center;
  background-repeat: no-repeat;
  
}


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

<td class="x-toolbar-cell" id="ext-gen149">
   <table id="statusbar-downspeed" cellspacing="0" class="x-btn x-btn-text-icon" style="width: auto;">
      <tbody class="x-btn-small x-btn-icon-small-left">
         <tr>
            <td class="x-btn-tl"><i>&nbsp;</i></td>
            <td class="x-btn-tc"></td>
            <td class="x-btn-tr"><i>&nbsp;</i></td>
         </tr>
         <tr>
            <td class="x-btn-ml"><i>&nbsp;</i></td>
            <td class="x-btn-mc"><em class="x-btn-arrow" unselectable="on">
                <button style="width:50px;height:50px" type="button" id="ext-gen150" class=" x-btn-text x-deluge-downloading"><div></div></button></em></td>
            <td class="x-btn-mr"><i>&nbsp;</i></td>
         </tr>
         <tr>
            <td class="x-btn-bl"><i>&nbsp;</i></td>
            <td class="x-btn-bc"></td>
            <td class="x-btn-br"><i>&nbsp;</i></td>
         </tr>
      </tbody>
   </table>
</td>