Question

以下是您可以看到问题的示例：
https://jsfiddle.net/bqwacfah/

＆＃13;

body {
  background-color: black;
}

img {
  margin: 30px;
  width: 200px;
  filter: brightness(100%);
  transition-duration: 2s;
  transition-timing-function: linear;
  transition-property: all;
}

img:hover {
  filter: brightness(300%);
}

.image1 {
  box-shadow: 0px 0px 25px 25px hsl(205, 100%, 50%);
}

.image2 {
  box-shadow: 0px 0px 25px 25px hsl(205, 60%, 20%);
}

div {
  display: inline-block;
  margin: 30px;
  height: 200px;
  width: 200px;
  filter: brightness(100%);
  transition-duration: 2s;
  transition-timing-function: linear;
  transition-property: all;
}

div:hover {
  filter: brightness(300%);
}

.div1 {
  background-color: hsl(200, 100%, 50%);
  box-shadow: 0px 0px 25px 25px;
  color: hsl(205, 100%, 50%);
}

.div2 {
  background-color: hsl(200, 60%, 20%);
  box-shadow: 0px 0px 25px 25px;
  color: hsl(205, 60%, 20%);
}

＆＃13;

<body>

  <img class="image1" src="https://upload.wikimedia.org/wikipedia/commons/5/5a/Jupiter_by_Cassini-Huygens.jpg">
  <img class="image2" src="https://upload.wikimedia.org/wikipedia/commons/5/5a/Jupiter_by_Cassini-Huygens.jpg">
  <br />
  <div class="div1"></div>
  <div class="div2"></div>

</body>

＆＃13;

我已经使用实际的Chrome 56对其进行了测试。在右侧，一切正常。

在左侧，您会注意到......

同时悬停颜色的色调变为绿色
在过渡结束时，div的色调/颜色和box-shadow是相同的
在转换结束前不久，盒子阴影有点被吹灭，但在过渡后它看起来很好。
当完成转换并将鼠标移离div时，框阴影立即被炸掉

是否有任何解决方案或解决方法可以避免这些问题，而不是选择深色基色？

使用过滤器进行CSS过渡会导致视觉问题

0 个答案: