做项目时遇到了一个有趣的css特效。

目前各大浏览器对于css3的兼容已经非常好了,最新版本都可以支持css3,老版本的ie9以下的还是不支持,不过这不是重点,微软都准备放弃这些老古董了。

现在规范中支持的效果有:

grayscale 灰度               值为0-1之间的小数
sepia 褐色       值为0-1之间的小数
saturate 饱和度     值为num
hue-rotate 色相旋转  值为angle
invert 反色       值为0-1之间的小数
opacity 透明度     值为0-1之间的小数
brightness 亮度     值为0-1之间的小数
contrast 对比度     值为num
blur 模糊       值为length
drop-shadow 阴影 用法是标准的CSS写法,如:
-webkit-filter:drop-shadow(10px 10px 10px #000);
-webkit-filter: blur(2px);
<img src="../img/filter_test.png" class="test-before">
<img src="../img/filter_test.png" class="test-after">

css代码如下:

.test-after {

-webkit-filter:grayscale(0.5);

filter:grayscale(0.5);

-moz-filter:grayscale(0.5);

/-webkit-filter:blur(20px);

filter:blur(20px);

-moz-filter:blur(20px);
/

}

关于css3 中filter的各种特效的更多相关文章

  1. css3中filter的各种特效

    css3中的filter属性可以说是简单易用且强大,这些效果作用在图片上实现一些特效(也可以作用在vidio上,此处只讨论图片特效). 浏览器兼容性 目前各大浏览器对于css3的兼容已经非常好了,最新 ...

  2. [转]CSS3 Filter的十种特效

    最近到处看到有人在说CSS3的filter一直没有时间自己去测试这效果.今天终于抽出时间学习这个CSS3的Filter.不整不知道呀,一整才让我感到吃惊,太强大了.大家先来看个效果吧: 我想光看上面的 ...

  3. css3中强大的filter(滤镜)属性

    CSS3中强大的filter(滤镜)属性 博主最近在做网站的过程中发现了一个非常强大的CSS3属性,就是filter(滤镜)属性,喜欢p图的朋友看名字都应该知道这是什么神器了吧.当然,这个属性的效果肯 ...

  4. CSS3的filter用法

    最近到处看到有人在说CSS3的filter一直没有时间自己去测试这效果.今天终于抽出时间学习这个CSS3的Filter.不整不知道呀,一整才让我感到吃惊,太强大了.大家先来看个效果吧: 我想光看上面的 ...

  5. 纯CSS3实现动态火车行驶特效

    上次开完飞机,这次开火车 查看效果:http://hovertree.com/texiao/css3/7/ 效果图: 代码如下: <!DOCTYPE html> <html> ...

  6. CSS3中毛玻璃效果的使用方法

    今天在使用icloud的时候看到苹果icloud官网的毛玻璃效果非常赞,仔细研究了一下它的实现方式,是使用js配合background-image: -webkit-canvas的形式绘制出的毛玻璃背 ...

  7. CSS3中动画属性transform、transition和animation

    Transform:变形 在网页设计中,CSS被习惯性的理解为擅长表现静态样式,动态的元素必须借助于javascript才可以实现,而CSS3的出现改变了这一思维方式.CSS3除了增加革命性的创新功能 ...

  8. css中filter:alpha透明度使用

    css中filter:alpha透明度使用    使用filter可以设置透明度,filter:alpha在IE下是没有问题的,要支持firefox就需要使用-moz-opacity,下面有个不错的示 ...

  9. 纯css3 加载loading动画特效

    最近项目中要实现当页面还没有加载完给用户提示正在加载的loading,本来是想做个图片提示的,但是图片如果放大电脑的分辨率就会感觉到很虚,体验效果很不好.于是就采用css3+js实现这个loading ...

随机推荐

  1. 在github上写个人简历——先弄个主页

    起因 不知道园友们在使用智联招聘等网站填写简历的时候对要求输入的内容有没有一种无力感,不吐槽了反正就一句话,按照它提供的格式我没法儿写简历,而且面试的时候总会被问道有没有自己作品,哥们儿天天上班,下班 ...

  2. ReactJs入门教程

    现在最热门的前端框架有AngularJS.React.Bootstrap等.自从接触了ReactJS,ReactJs的虚拟DOM(Virtual DOM)和组件化的开发深深的吸引了我,下面来跟我一起领 ...

  3. 將後台的Json數據返回到前台

    前台JS代碼 $.post('/Book/GetBookClassIDByName', { BookName: "旅遊手冊" }, function (data) { if (da ...

  4. 图片轮播(左右切换)--JS原生和jQuery实现

    图片轮播(左右切换)--js原生和jquery实现 左右切换的做法基本步骤跟 上一篇文章  淡入淡出 类似,只不过修改了一些特定的部分 (1)首先是页面的结构部分 对于我这种左右切换式 1.首先是个外 ...

  5. Fat-tree 胖树交换网络

    胖树架构下,网络带宽不收敛 传统的树形网络拓扑中,带宽是逐层收敛的,树根处的网络带宽要远小于各个叶子处所有带宽的总和. 而胖树网络则更像是真实的树,越到树根,枝干越粗,即:从叶子到树根,网络带宽不收敛 ...

  6. Spring4.0学习笔记(12) —— JDBCTemplate 操作数据库

    整体配置 1.配置xml文件 <beans:beans xmlns="http://www.springframework.org/schema/mvc" xmlns:xsi ...

  7. linux_windows下配置tomcat区别 ,不同子域名映射不同 项目

    windows下 均为修改tomcat/bin/server.xml 在最后 替换 注意 docBase / <Realm className="org.apache.catalina ...

  8. 用Open SSH生成公钥和私钥(Win)

    也可以使用 dsa 加密算法进行加密,命令如下: ssh-keygen -t dsa

  9. 用react重构个人网站 3-22

    问题一:import React from 'react'这个写法是怎么回事? 答案:require是common.js的写法,import是ES6的写法,主要功能都是引入模块,写法上: var mo ...

  10. Delphi各种Socket组件的模式和模型

    Delphi各种Socket组件的模式和模型 Delphi的大多数书籍里面都没有提到delphi的各种socket通信组件的模式和模型,有的书只讲解了windows的socket模式和模型,并没有归纳 ...