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

​

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>

​