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>

在CSS动画后悬停

1 个答案: