使用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>

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>