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属性.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>

jar cfm SwingTest.jar SwingTest.mf SwingTest.class

使用CSS旋转发光图像

2 个答案: