前言
CSS3 Filter与我们所熟悉的CSS Filter是完全不同的两个概念,也不是所谓的IE滤镜,它是指通过CSS或SVG渲染元素概念可以描述的元素,包括子元素。
语法
语法很简单,grayscale的参数中100%表示黑白色调,0%表示彩色。
1 2 3 4 5 6 7 |
-webkit-filter: grayscale(100%); -moz-filter: grayscale(100%); -ms-filter: grayscale(100%); -o-filter: grayscale(100%); filter: grayscale(100%); filter: gray; |
demo
链接
http://xuanfengge.com/demo/201408/gray/
动图
实现代码
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
.sprite-clients { background: url(clients.png); width: 200px; height: 50px; filter: gray; -webkit-filter: grayscale(100%); -moz-transition: all 0.5s ease-in-out; -webkit-transition: all 0.5s ease-in-out; transition: all 0.5s ease-in-out; display: block; margin-left: auto; margin-right: auto; } .clientcell .sprite-clients:hover { filter: none; -webkit-filter: grayscale(0%); } |
鼓励一下,文章非常好
天苍苍,野茫茫,风吹草低见牛羊
赞一个!长知识啦!
赞一个!长知识啦!
欢迎来访,哈哈
导航栏好酷,求知道是什么原理实现的
HTML5