Question

我正在使用2个滤镜属性使图像在悬停时变白。

.uni-im img {
    filter: brightness(0) invert(1);
}

我想使用过渡效果获得平滑的视图。

.uni-im img {
    filter: brightness(0) invert(1);
    transition: filter .15s linear;
}

但是，这两种属性都将运行此过渡。我的意思是亮度的过渡，而反相的过渡。
我想直接变成白色，而看不到黑色图像。纯CSS可以做到吗？

示例：

div {
  background: white;
  border: 1px solid #ccc;
  padding: 20px;
  display: inline-block;
  transition: background 2s linear;
}
img {
  width: 30px;
  height: 30px;
  transition: filter 2s linear;
}

div:hover {
  background: #3F85CE;
}
div:hover img {
  filter: brightness(0) invert(1);
}

<div>
<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEAAAABACAYAAACqaXHeAAAABGdBTUEAALGPC/xhBQAAACBjSFJNAAB6JgAAgIQAAPoAAACA6AAAdTAAAOpgAAA6mAAAF3CculE8AAAACXBIWXMAAA3WAAAN1gGQb3mcAAAAB3RJTUUH4gsGEwwX9OWpBgAAABp0RVh0U29mdHdhcmUAUGFpbnQuTkVUIHYzLjUuMTFH80I3AAAC00lEQVR4Xu2Z3UrEMBCFqyirq/iHLKggeCe6CuKFPzeuLIpXXqh4Iejb+Hq+ks7USZ3NJmltNqWrpxDczaYz53ydpGnNMhwgAAIgAAIgAAIgAAIgAAIgAAIgAAIgAAKlBJau3j8+29hI+VKp+pgBbTTt0hTjMXiuSZYsQWTgWH37lP+Y2hG1Q2oH1LhvxejiBPS5G6kz5eld0WhysHb2wF7YE3tjj9xXHGe/Ke2U6icR+zdeclhC7FmSb6oy0gvKnuqfn4TQRDHmlc49laNYuKlvk/uLcQJgRgvyzKW52DmWyHQRVumbq+BnRleArW1ZwGxbPxxJ/0iC1MYqxs8vkMxzfcq29C/bcUIAfkrEOkuCvVQU1dgwX3WGqjYIgJTviNlVy8WNtdI2ZjKUyGN0VbTuuM4tA2AWyCdn6WTZSSucf4s4cV2UsjWrFAAFfq0TuGkwdcrf3AnMVfZp7nnKvVXTQDTeeCq15zNXpQI6rtskBTx3gOE7xjW1e2ov5qpM6i/HlNicY+TuJFrOLaPft7ks68QAWPNUwGUdYyTkjdoDtVtql9R4W8qNP3Mf//ZWMzbHGDlE+1oMgFMLwIZLHCXoU5v1JUrQz7n6Hi0bJp9oP60NQC0u+S1Rfd9KYCo25JalsdBcF8DYiw977sUqTnR+vvOzYDhflAQXQSvAbiKxKcPuWh7GcoUAXMj8GaZU2FDsoXi5cC6SnlWex643JLCJNE4vugLyZ+R/duTvPrxPfX8dhrqjZQOZBo9kuo3P+ZO+FuzxUTwPTPCHOruvaT6HjPOuc+Tg3RW/PTUVwVtTJnSnyoW/t74pvXei91ZdcfYY3rXK4AUauKiCNbnVjS37WaV7kYItBO5247lk8PqUmjeGNITcS2Wq1g5qmq782LQu2w36oPDe2fsUVZlkewayl7T/OG2PVygBARAAARAAARAAARAAARAAARAAARAAgTCBLwkq2jFKY/W7AAAAAElFTkSuQmCC">
</div>

Answer 1

为了更容易看到效果，我创建了一个新的代码段，其中图像的颜色改为背景。

但是对于您的用例，它也一样。

只需更改您要应用的过滤器

.test {
  width: 200px;
  height: 150px;
  background: cyan;
  margin: 20px;
  transition: filter 4s;
}

.test:hover {
  filter:  grayscale(1) brightness(1.5);
}

<div class="test"></div>

Answer 2

您提供的代码笔的过渡设置为2s。如果缩短转换时间，则看不到黑色。

例如。

div {
  background: white;
  border: 1px solid #ccc;
  padding: 20px;
  display: inline-block;
  transition: background 100ms linear;
}
img {
  width: 30px;
  height: 30px;
  transition: filter 100ms linear;
}

您还可以从图像中删除过渡效果。这样，您可以在.15 s的时间内从白色过渡到蓝色，但是图像会直接从蓝色过渡到白色，而无需先过渡到黑色。

多重过滤过渡

2 个答案: