如何旋转伪元素的背景图像？

Question

我知道我可以通过将背景图像插入伪元素中并使其旋转来旋转背景图像。 但是，如果我需要旋转伪元素的背景图像，该怎么办？

这是我的情况：

 #button_motore { width: 150px; height: 50px; background-color: #41a8dc; position: relative; padding: 0; border: 0; transition: 0.5s; display: inline-block; margin-top: 10px; } #button_motore:after { content: ""; width: 50px; height: 50px; position:absolute; background-color: #418FDC; display:inline-block; right: 0; top: 0; background-image: url(../img/eliche.png); background-size: 35px 35px; background-position: 7.5px 7.5px; background-repeat: no-repeat; transition: 0.5s; } #button_motore:hover { background-color: #418FDC; } #button_motore:hover::after{ background-color: #4172DC; -webkit-animation: motore_animation 0.4s linear; animation: motore_animation 0.4s linear; -webkit-animation-fill-mode: forwards; animation-fill-mode: forwards; } #button_motore_content{ font-size: 18px; color: white; position:relative; right: 25px; } 

 <button type="submit" id="button_motore" name="motore"><font id="button_motore_content">Motore</font></button> 

我想旋转eliche.png 。 我也可以使用jQuery。

Answer 1

如@Paulie_D所述，您不能旋转背景图像，但可以旋转伪元素本身。 如下所示：

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

#button_motore:hover::after{
  background-color: #4172DC;
  /* obviously add prefixes */
  animation: spin 1s infinite linear;   
}