html - CSS 过渡不适用于我的过滤器 : brightness()?

Question

我有这些图标，它们是我想在悬停时应用过滤器的图像。但是，它似乎不起作用。

我的代码:

.icon {
   -webkit-transition: all 1s ease;
   transition:  all 1s ease;
}
.icon:hover {
   -webkit-filter: brightness(130%);
    filter: brightness(130%);
}

Answer 1

请注意，filter 在 Internet Explorer 或 Firefox 35 或更早版本上不起作用。如果您使用的是这些浏览器，它将无法正常工作。但是，如果您使用的是兼容的浏览器，正如您在此处看到的那样，它将正常工作。

img {
  -webkit-transition: all 1s ease;
  transition: all 1s ease;
}

img:hover {
  -webkit-filter: brightness(130%);
  filter: brightness(130%);
}

<img src="https://cr2014studyabroad.files.wordpress.com/2014/12/pineapple-2.png" width=200 height=200 />

有关此实验技术的更多信息，请访问这些链接

https://developer.mozilla.org/en-US/docs/Web/CSS/filter http://www.w3schools.com/cssref/css3_pr_filter.asp