html - 悬停在 CSS 动画之后

Question

我正在尝试在 CSS 动画之后进行悬停。 动画使用关键帧更改圆圈的大小和颜色，但是在动画完成后，它完成的颜色不会像通常那样在悬停时发生变化。

body {
  background: black;
}

#panorama {
  position: fixed;
  margin: auto;
  top: 0;
  right: 0;
  bottom: 4vw;
  left: 0;
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  border-radius: 50%;
}

#panorama.large {
  width: 17vw;
  height: 17vw;
}

#panorama.black {
  background-color: black;
  border: solid rgba(255, 255, 255, 0.4) 1px;
  -webkit-filter: drop-shadow(0 0 5px rgba(255, 255, 255, 0.6));
  -moz-filter: drop-shadow(0 0 5px rgba(255, 255, 255, 0.6));
  filter: drop-shadow(0 0 5px rgba(255, 255, 255, 0.6));
}

#panorama.glow {
  animation-duration: 1s;
  animation-timing-function: ease-out;
  animation-delay: 0.7s;
  animation-fill-mode: forwards;
}

#panorama.large.black.glow {
  animation-name: panoramaLargeBlackGlowDownTurnOn;
}

@keyframes panoramaLargeBlackGlowDownTurnOn {
  0% {
    width: 17vw;
    height: 17vw;
    background-color: black;
  }
  99% {
    background-color: black;
  }
  100% {
    width: 3.5vw;
    height: 3.5vw;
    background-color: white;
    -webkit-filter: drop-shadow(0 0 6px rgba(255, 255, 255, 1));
    -moz-filter: drop-shadow(0 0 6px rgba(255, 255, 255, 1));
    filter: drop-shadow(0 0 6px rgba(255, 255, 255, 1));
  }
}

#panorama.large.black.glow:hover {
  background-color: red !important;
}

<a href="#">
  <div id="panorama" class="large black glow"></div>
</a>

或在此处查看代码:JSFiddle

Answer 1

这是因为您正在使用 forwards，这将强制使用动画的最后状态并且您无法覆盖它。为了克服这个问题，您可以考虑使用 CSS 变量来定义背景颜色，您只需更改变量即可更改背景

body {
  background: black;
}

#panorama {
  position: fixed;
  margin: auto;
  top: 0;
  right: 0;
  bottom: 4vw;
  left: 0;
  border-radius: 50%;
}

#panorama.large {
  width: 17vw;
  height: 17vw;
}

#panorama.black {
  background-color: black;
  border: solid rgba(255, 255, 255, 0.4) 1px;
  filter: drop-shadow(0 0 5px rgba(255, 255, 255, 0.6));
}

#panorama.glow {
  animation-duration: 1s;
  animation-timing-function: ease-out;
  animation-delay: 0.7s;
  animation-fill-mode: forwards;
}

#panorama.large.black.glow {
  animation-name: panoramaLargeBlackGlowDownTurnOn;
}

@keyframes panoramaLargeBlackGlowDownTurnOn {
  0% {
    width: 17vw;
    height: 17vw;
    background-color: black;
  }
  99% {
    background-color: black;
  }
  100% {
    width: 3.5vw;
    height: 3.5vw;
    background-color: var(--c,#fff);
    filter: drop-shadow(0 0 6px rgba(255, 255, 255, 1));
  }
}

#panorama.large.black.glow:hover {
  --c: red;
}

<a href="#">
  <div id="panorama" class="large black glow"></div>
</a>

另一个想法是使用内嵌框阴影来着色:

body {
  background: black;
}

#panorama {
  position: fixed;
  margin: auto;
  top: 0;
  right: 0;
  bottom: 4vw;
  left: 0;
  border-radius: 50%;
}

#panorama.large {
  width: 17vw;
  height: 17vw;
}

#panorama.black {
  background-color: black;
  border: solid rgba(255, 255, 255, 0.4) 1px;
  filter: drop-shadow(0 0 5px rgba(255, 255, 255, 0.6));
}

#panorama.glow {
  animation-duration: 1s;
  animation-timing-function: ease-out;
  animation-delay: 0.7s;
  animation-fill-mode: forwards;
}

#panorama.large.black.glow {
  animation-name: panoramaLargeBlackGlowDownTurnOn;
}

@keyframes panoramaLargeBlackGlowDownTurnOn {
  99% {
    background-color: black;
  }
  100% {
    width: 3.5vw;
    height: 3.5vw;
    background-color: #fff;
    filter: drop-shadow(0 0 6px rgba(255, 255, 255, 1));
  }
}

#panorama.large.black.glow:hover {
  box-shadow:0 0 0 50vw red inset;
  border-color:rgba(255, 0, 0, 0.6); /*we also change the border since background is also visible under the border*/
}

<a href="#">
  <div id="panorama" class="large black glow"></div>
</a>