Filter的十种特效

2024-01-20 19:32
文章标签 特效 filter 十种

本文主要是介绍Filter的十种特效,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

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


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

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

语法
 elm {filter: none | <filter-function > [ <filter-function> ]* }   

其默认值是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支持,而且只有webkit nightly版本和Chrome 18.0.976以上以上版本才支持,所以说,你要是想看到效果就需要下载这两个版本中的一个,我使用的是Google Chrome Canary。

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

<img class="normal" title="normal" width="128" height="128" alt="HTML5 Logo" src="http://www.w3cplus.com/sites/default/files/filter.jpg" />


我在此处取名为“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);}



这篇关于Filter的十种特效的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/627093

相关文章

『功能项目』战士的平A特效【35】

我们打开上一篇34武器的切换实例的项目, 本章要做的事情是在战士的每次按A键时在指定位置生成一个平A特效 首先将之前下载的技能拖拽至场景中 完全解压缩后重命名为AEffect 拖拽至预制体文件夹 进入主角动画的战士动画层级 双击第一次攻击 选择Animation 创建事件 创建的动画事件帧放在攻击动画挥剑指定处 命名为PerpetualAtt

第49课 Scratch入门篇:骇客任务背景特效

骇客任务背景特效 故事背景:   骇客帝国特色背景在黑色中慢慢滚动着! 程序原理:  1 、 角色的设计技巧  2 、克隆体的应用及特效的使用 开始编程   1、使用 黑色的背景: ![在这里插入图片描述](https://i-blog.csdnimg.cn/direct/7d74c872f06b4d9fbc88aecee634b074.png#pic_center)   2

Hbase Filter+Scan 查询效率优化

Hbase Filter+Scan 查询效率问题 众所周知,Hbase利用filter过滤器查询时候会进行全表扫描,查询效率低下,如果没有二级索引,在项目中很多情况需要利用filter,下面针对这种情况尝试了几种优化的方案,仅供参考,欢迎交流。 根据业务要求,作者需要根据时间范围搜索所需要的数据,所以作者设计的rowKey是以时间戳为起始字符串的。 正确尝试: 1.scan 设置 开始行和结

【生日视频制作】酒吧一群美女车展模特大屏幕视频改字AE模板修改文字软件生成器教程特效素材【AE模板】

生日视频制作教程酒吧一群美女车展模特大屏幕视频改字AE模板修改文字特效广软件告生成神器素材祝福玩法AE模板工程 怎么如何做的【生日视频制作】酒吧一群美女车展模特大屏幕视频改字AE模板修改文字软件生成器教程特效素材【AE模板】 生日视频制作步骤: 安装AE软件 下载AE模板 把AE模板导入AE软件 修改图片或文字 渲染出视频

Filter基本原理和使用

https://www.cnblogs.com/xdp-gacl/p/3948353.html 一、Filter简介   Filter也称之为过滤器,它是Servlet技术中最激动人心的技术,WEB开发人员通过Filter技术,对web服务器管理的所有web资源:例如Jsp, Servlet, 静态图片文件或静态 html 文件等进行拦截,从而实现一些特殊的功能。例如实现URL级别的权限访问控

【生日视频制作】劳斯莱斯库里南中控改名软件AE模板修改文字软件生成器教程特效素材【AE模板】

生日视频制作教程豪车劳斯莱斯库里南中控改名软件AE模板修改文字特效广告生成神器素材祝福玩法AE模板工程 怎么如何做的【生日视频制作】劳斯莱斯库里南中控改名软件AE模板修改文字软件生成器教程特效素材【AE模板】 生日视频制作步骤: 下载AE模板 安装AE软件 把AE模板导入AE软件 修改图片或文字 渲染出视频

印度再现超级大片,豪华阵容加顶级特效

最近,印度影坛再次掀起了风潮,一部名为《毗湿奴降临》的神话大片强势登陆各大影院,上映首周票房就飙升至105亿卢比,成功占据了票房榜首的位置。之后,这部电影也在北美上映,海外市场的表现同样不俗,收获了相当亮眼的票房成绩。作为一部印度神话科幻大片,《毗湿奴降临》不仅在本土大火,在国际市场上也引发了不小的关注。 《毗湿奴降临》由印度著名导演纳格·阿什温执导,卡司阵容极其豪华,集结了迪皮卡·帕度柯妮

在UE的内容浏览器中添加自定义的Filter

目标需求 在UE的内容浏览器中,可以使用Filter来过滤资源: 目标需求是在这之中添加一个自定义的Filter。 其代码上是非常简单的,在本文末尾。 然而我觉得找到方法的过程也是挺有意思的,因此我也记录了下来。 探索过程 1. 在哪定义? 首先,我猜测Other Filters下的各个项目,也都是通过代码添加的。因此,我调了其中一项,比如Show Redirectors,然后对代码进

Flink实例(六十八):布隆过滤器(Bloom Filter)的原理和实现

什么情况下需要布隆过滤器? 先来看几个比较常见的例子 字处理软件中,需要检查一个英语单词是否拼写正确在 FBI,一个嫌疑人的名字是否已经在嫌疑名单上在网络爬虫里,一个网址是否被访问过yahoo, gmail等邮箱垃圾邮件过滤功能 这几个例子有一个共同的特点: 如何判断一个元素是否存在一个集合中? 常规思路 数组链表树、平衡二叉树、TrieMap (红黑树)哈希表 虽然上面描述的

过滤器(Filter)和拦截器(Interceptor)

在Web开发中,过滤器(Filter)和拦截器(Interceptor)都是重要的组件,它们都可以对HTTP请求进行预处理、后处理以及一些额外的操作。然而,它们之间在多个方面存在明显的区别 1. 运行位置 过滤器(Filter):运行在Web服务器和Servlet容器之间的组件,可以拦截所有进出该容器的请求和响应。过滤器是Servlet规范的一部分,不依赖于特定的框架。拦截器(Intercep