使用CSS旋转发光图像

Question

我该如何使用CSS让这个带有无限发光动画的图片同时旋转起来。我正在尝试同时使用两种动画。我想让它无限旋转。

.topbar-artwork img{
  animation: glowing 600ms infinite;
}

@keyframes glowing {
  0% { box-shadow: 0 0 -10px #000; }
  40% { box-shadow: 0 0 20px #000; }
  60% { box-shadow: 0 0 20px #000; }
  100% { box-shadow: 0 0 -10px #000; }
}

<div class="topbar-artwork">
  <img src="https://i.imgur.com/0INjJXJ.jpg">
  </div>

- EIP

---

如果有解决您问题的答案，请不要忘记接受它，谢谢。 - Temani Afif

Answer 1

您可以简单地添加另一个动画：

.topbar-artwork img {
  animation: glowing 600ms infinite,
             spin 2s infinite linear;
}

@keyframes glowing {
  0% {
    box-shadow: 0 0 0px #000;
  }
  40% {
    box-shadow: 0 0 20px #000;
  }
  60% {
    box-shadow: 0 0 20px #000;
  }
  100% {
    box-shadow: 0 0 0px #000;
  }
}

@keyframes spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

<div class="topbar-artwork">
  <img src="https://i.imgur.com/0INjJXJ.jpg">
</div>

- Temani Afif

Answer 2

要实现旋转功能，请使用CSS属性transform: rotate(deg)

    .topbar-artwork img{
  animation: glowing 600ms infinite;
  animation-timing-function: linear;
}

@keyframes glowing {
  0% { box-shadow: 0 0 -10px #000; transform: rotate(0deg);}
  40% { box-shadow: 0 0 20px #000; }
  60% { box-shadow: 0 0 20px #000; }
  100% { box-shadow: 0 0 -10px #000; transform: rotate(360deg);}
}

    <div class="topbar-artwork">
      <img src="https://i.imgur.com/0INjJXJ.jpg">
      </div>

- Elysian Storm