我正在尝试使用下面概述的技术将元素从灰度转换为颜色：
CSS
.technical .tech-icon {
width: 33px;
height: 32px;
display: inline-block;
filter: url(filters.svg#grayscale); /* Firefox 3.5+ */
filter: gray; /* IE6-9 */
-webkit-filter: grayscale(1); /* Google Chrome & Safari 6+ */
-webkit-transition: all 0.5s ease-out; /* Safari 3.2+,Chrome */
-moz-transition: all 0.5s ease-out; /* Firefox 4-15 */
-o-transition: all 0.5s ease-out; /* Opera 10.5–12.00 */
transition: all 0.5s ease-out; /* Firefox 16+,Opera 12.50+ */
}
对于firefox,我们有filters.svg
<svg xmlns="http://www.w3.org/2000/svg"> <filter id="grayscale"> <feColorMatrix type="matrix" values="0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0"/> </filter> </svg>
我如何模仿适用于Chrome,IE9等的相同过渡属性？
编辑：我希望我的过渡属性可以使用我的Firefox SVG修复程序.
解决方法
您可以将包含灰度版本的额外元素覆盖到颜色版本.然后你动画不透明度……
.technical .tech-icon {
position: relative;
...
}
.technical .tech-icon .grayscale {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
opacity: 0;
-webkit-filter: grayscale(1);
filter: url(filters.svg#grayscale); /*Firefox*/
filter: progid:DXImageTransform.Microsoft.BasicImage(grayscale=1)
filter:progid:DXImageTransform.Microsoft.Alpha(opacity=0); /*IE*/
}
对于不支持CSS过渡的浏览器,您可以使用jQuery的fadeIn()设置不透明度的动画
