Filter的十种特效
发布日期:2021-10-16 14:44:10 浏览次数:2 分类:技术文章

本文共 1991 字,大约阅读时间需要 6 分钟。

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

我想光看上面的效果就能吸引你了,要是你自己动手的话,我想您更会感到神奇。细一看,这些效果就像是photoshop整出来的一样,其实是真是这样的,有很多效果都是类似于photoshop中的特效。不过有一点大家需要特别的注意:此处的和完全是两样东东。更不是我们一直说的IE滤镜。具体所指的是什么?大家感兴趣的可以点击。我就不多说了,因为说也说不清楚,我只想和大家一起探讨的是如何使用这个“CSS3 Filter”。那我们开始吧。

Filters主要是运用在图片上,以实现一些特效。(尽管他们也能运用于video上),不过我们在些只来讨论图片上的运用。

语法

elm {        filter: none | 
[
]* }

其默认值是none,他不具备继承性,其中filter-function一个具有以下值可选:

  1. grayscale灰度
  2. sepia褐色(求专业指点翻译)
  3. saturate饱和度
  4. hue-rotate色相旋转
  5. invert反色
  6. opacity透明度
  7. brightness亮度
  8. contrast对比度
  9. blur模糊
  10. drop-shadow阴影

浏览器的兼容性

目前支持这个属性的浏览器少得可怜,现在只是webkit支持,而且只有版本和以上版本才支持,所以说,你要是想看到效果就需要下载这两个版本中的一个,我使用的是。

下面我们一起来见证这些效果的实现过程,首先在页面中有一张图片:

HTML5 Logo

我在此处取名为“normal”,表示此图没有任何“filter”效果,那么后面的效果,我们依次将其类名改成对应的效果名。大家看下面的代码吧:

一、grayscale灰度

使用这个特效,会把图片变成灰色的,也就是说你的图片将只有两种颜色“黑色”和“白色”

.grayscale{          -webkit-filter:grayscale(1);      }

默认值:100%,

如果你在grayscale()中没有任何参数值,将会以“100%”渲染。其效果下图所示:

二、sepia

sepia不知道如何译,暂时就叫他“褐色”,使用这种效果,你的图片好像很古老的一样

.sepia{          -webkit-filter:sepia(1);      }

默认值:100%,

如果你在sepia()中没有任参数值,将会以“100%”渲染,具体效果如下:

三、saturate饱和度

saturat是用来改变图片的饱和度

.saturate{         -webkit-filter:saturate(0.5);      }

默认值:100%,

如果我们将其值变大到300%

.saturate{         -webkit-filter:saturate(3);      }

四、hue-rotate色相旋转

hue-rotate用来改变图片的色相

.hue-rotate{           -webkit-filter:hue-rotate(90deg);       }

默认值:0deg

五、invert反色

invert做出来的效果就像是我们照相机底面的效果一样

.invert{            -webkit-filter:invert(1);        }

默认值:100%

六、opacity透明度

这个就很好理解了,改变图片的透明度

.opacity{        -webkit-filter:opacity(.2);      }

默认值:100%

七、brightness亮度

改变图片的亮度

.brightness{            -webkit-filter:brightness(.5);        }

默认值:100%

八、contrast对比度

改变图片的对比度,整个psd的,都懂这个意思

.contrast{            -webkit-filter:contrast(2);        }

默认值:100%

九、blur模糊

一看字面意思就知道了,改变图片的清晰度

.blur{            -webkit-filter:blur(3px);        }

默认值:0

十、drop-shadow阴影

这个很像box-shadow一样的效果,给图片加阴影效果

.drop-shadow{            -webkit-filter:drop-shadow(5px 5px 5px #ccc);        }

转载地址:https://blog.csdn.net/songchunmin_/article/details/75213270 如侵犯您的版权,请留言回复原文章的地址,我们会给您删除此文章,给您带来不便请您谅解!

上一篇:字母’x’在CSS世界中的角色和故事
下一篇:伪类和伪元素的区别(结论)

发表评论

最新留言

哈哈,博客排版真的漂亮呢~
[***.90.31.176]2024年03月06日 19时25分32秒

关于作者

    喝酒易醉,品茶养心,人生如梦,品茶悟道,何以解忧?唯有杜康!
-- 愿君每日到此一游!

推荐文章

linux两台主机添加信任,Linux两台机器间添加信任,实现不用密码问,互传文件... 2019-04-21
linux 自动获取ssl证书,linux生成自验证ssl证书的具体命令和步骤 2019-04-21
linux基础命令20个,20-linux中基础命令 2019-04-21
重置网络配置 android,重置Android移动网络信号? 2019-04-21
java约瑟夫环pta上_cdoj525-猴子选大王 (约瑟夫环) 2019-04-21
java++记录+运行_记录java+testng运行selenium(三)---xml、ini、excel、日志等配置 2019-04-21
mysql居左查询abcd_MySql速查手册 2019-04-21
loadrunner 错误: 无法找到 java.exe_LoadRunner错误及解决方法总结 2019-04-21
Java小魔女芭芭拉_沉迷蘑菇不可自拔,黏土人《小魔女学园》苏西·曼芭芭拉 图赏... 2019-04-21
php+mysql记事本_一个简单记事本php操作mysql辅助类创建 2019-04-21
300小时成为java程序员_直击面试现场: Java程序员3轮6小时面试, 成功拿到阿里offer!... 2019-04-21
中国网建java发送短信_短信验证登陆-中国网建提供的SMS短信平台 2019-04-21
隔行变色java代码_jquery入门—选择器实现隔行变色实例代码 2019-04-21
角标越界 Java_【新人求助】利用占位符操作数据库是总是提示数组角标越界是怎么回事 - Java论坛 - 51CTO技术论坛_中国领先的IT技术社区... 2019-04-21
java类中声明log对象_用于Android环境,java环境的log打印,可打印任何类型数据 2019-04-21
db2与mysql编目_DB2编目、联邦数据库 - Goopand's OS Space - OSCHINA - 中文开源技术交流社区... 2019-04-21
atomikosdatasourcebean mysql_SpringBoot2整合JTA组件实现多数据源事务管理 2019-04-21
webpack 入口文件 php,如何实现webpack多入口文件打包配置 2019-04-21
php tire树,Immutable.js源码之List 类型的详细解析(附示例) 2019-04-21
matlab转差频率控制,转差频率控制的异步电机调速系统的研究 2019-04-21