我正在尝试使用下面概述的技术将元素从灰度转换为颜色:
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()设置不透明度的动画
原文地址:https://www.jb51.cc/css/215884.html
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。