51可用代码模板网站

咨询热线:

181-1164-6936
  • 1
CSS样式
当前位置:首页>实用代码>CSS样式>

CSS3 Filter的十种特效

时间:2017-08-11 10:45点击:

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


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

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


    elm {  
      filter: none | <span class="xml" style=""><span class="tag" style=""><<span class="title" style="color:rgb(38,139,210)">filter-function
</span> ></span> [ <span class="tag" style=""><<span class="title" style="color:rgb(38,139,210)">filter-function</span>></span> ]*   
    }        
    span>  
 其默认值是none,他不具备继承性,其中filter-function一个具有以下值可选:

    grayscale灰度
    sepia褐色(求专业指点翻译)
    saturate饱和度
    hue-rotate色相旋转
    invert反色
    opacity透明度
    brightness亮度
    contrast对比度
    blur模糊
    drop-shadow阴影

浏览器的兼容性

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

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




    <span class="tag" style=""><<span class="title" style="color:rgb(38,139,210)">img</span> 
<span class="attribute" style="color:rgb(181,137,0)">
class</span>=<span class="value" style="color:rgb(42,161,152)">"normal"</span> 
<span class="attribute" style="color:rgb(181,137,0)">title</span>=
<span class="value" style="color:rgb(42,161,152)">"normal"</span> <span class="attribute" style="color:rgb(181,137,0)">width</span>=
<span class="value" style="color:rgb(42,161,152)">"128"</span> <span class="attribute" style="color:rgb(181,137,0)">height</span>=
<span class="value" style="color:rgb(42,161,152)">"128"</span> <span class="attribute" style="color:rgb(181,137,0)">alt</span>=
<span class="value" style="color:rgb(42,161,152)">"HTML5 Logo"</span> <span class="attribute" style="color:rgb(181,137,0)">src
</span>=<span class="value" style="color:rgb(42,161,152)">"http://www.w3cplus.com/sites/default/files/filter.jpg"</span> /></span>  



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

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



    <span class="class" style="">.grayscale</span><span class="rules" style="">{  
        <span class="rule" style=""><span class="attribute" style="color:rgb(181,137,0)">-webkit-filter</span>:<span class="value" style="">
<span class="function" style="">grayscale(<span class="number" style="color:rgb(42,161,152)">1</span>)</span>;</span></span>  
    <span class="rule" style="">}</span></span>      



 默认值:100%,

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


二、sepia

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


    <span class="class" style="">.sepia</span><span class="rules" style="">{  
        <span class="rule" style=""><span class="attribute" style="color:rgb(181,137,0)">-webkit-filter</span>:<span class="value" style="">
<span class="function" style="">sepia(<span class="number" style="color:rgb(42,161,152)">1</span>)</span>;</span></span>  
    <span class="rule" style="">}</span></span>      



 默认值:100%,

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



三、saturate饱和度

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



    <span class="class" style="">.saturate</span><span class="rules" style="">{  
       <span class="rule" style=""><span class="attribute" style="color:rgb(181,137,0)">-webkit-filter</span>:<span class="value" style="">
<span class="function" style="">saturate(<span class="number" style="color:rgb(42,161,152)">0.5</span>)</span>;</span></span>  
    <span class="rule" style="">}</span></span>        



 默认值:100%,



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



    <span class="class" style="">.saturate</span><span class="rules" style="">{  
       <span class="rule" style=""><span class="attribute" style="color:rgb(181,137,0)">-webkit-filter</span>:<span class="value" style="">
<span class="function" style="">saturate(<span class="number" style="color:rgb(42,161,152)">3</span>)</span>;</span></span>  
    <span class="rule" style="">}</span></span>  




四、hue-rotate色相旋转

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


    <span class="class" style="">.hue-rotate</span><span class="rules" style="">{  
         <span class="rule" style=""><span class="attribute" style="color:rgb(181,137,0)">-webkit-filter</span>:<span class="value" style="">
hue-<span class="function" style="">rotate(<span class="number" style="color:rgb(42,161,152)">90</span>deg)</span>;</span></span>  
     <span class="rule" style="">}</span></span>  



默认值:0deg


五、invert反色

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


    <span class="class" style="">.invert</span><span class="rules" style="">{  
        <span class="rule" style=""><span class="attribute" style="color:rgb(181,137,0)">-webkit-filter</span>:<span class="value" style="">
<span class="function" style="">invert(<span class="number" style="color:rgb(42,161,152)">1</span>)</span>;</span></span>  
      <span class="rule" style="">}</span></span>  



默认值:100%


六、opacity透明度

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


    <span class="class" style="">.opacity</span><span class="rules" style="">{  
     <span class="rule" style=""><span class="attribute" style="color:rgb(181,137,0)">-webkit-filter</span>:<span class="value" style="">
<span class="function" style="">opacity(.<span class="number" style="color:rgb(42,161,152)">2</span>)</span>;</span></span>  
    <span class="rule" style="">}</span></span>  



默认值:100%


七、brightness亮度

改变图片的亮度


    <span class="class" style="">.brightness</span><span class="rules" style="">{  
       <span class="rule" style=""><span class="attribute" style="color:rgb(181,137,0)">-webkit-filter</span>:<span class="value" style="">
<span class="function" style="">brightness(.<span class="number" style="color:rgb(42,161,152)">5</span>)</span>;</span></span>  
      <span class="rule" style="">}</span></span>  



默认值:100%


八、contrast对比度

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


<span class="class" style="">.contrast</span><span class="rules" style="">{  
   <span class="rule" style=""><span class="attribute" style="color:rgb(181,137,0)">-webkit-filter</span>:<span class="value" style="">
<span class="function" style="">contrast(<span class="number" style="color:rgb(42,161,152)">2</span>)</span>;</span></span>  
  <span class="rule" style="">}</span></span>


默认值:100%

九、blur模糊

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


<span class="class" style="">.blur</span><span class="rules" style="">{  
   <span class="rule" style=""><span class="attribute" style="color:rgb(181,137,0)">-webkit-filter</span>:<span class="value" style="">
<span class="function" style="">blur(<span class="number" style="color:rgb(42,161,152)">3</span>px)</span>;</span></span>  
  <span class="rule" style="">}</span></span>


默认值:0


十、drop-shadow阴影

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


    <span class="class" style="">.drop-shadow</span><span class="rules" style="">{  
     <span class="rule" style=""><span class="attribute" style="color:rgb(181,137,0)">-webkit-filter</span>:<span class="value" style="">
drop-<span class="function" style="">shadow(<span class="number" style="color:rgb(42,161,152)">5</span>px 
<span class="number" style="color:rgb(42,161,152)">5</span>px <span class="number" style="color:rgb(42,161,152)">5</span>px #ccc)</span>;
</span></span>  
      <span class="rule" style="">}</span></span>  




那么上面就是filter中的十种效果,当然大家可以根据自己的需求进行自定义:




<span class="class" style="">.custom</span><span class="rules" style="">{  
  <span class="rule" style=""><span class="attribute" style="color:rgb(181,137,0)">-webkit-filter</span>:<span class="value" style="">
<span class="function" style="">saturate(<span class="number" style="color:rgb(42,161,152)">5</span>)
</span> hue-<span class="function" style="">rotate(<span class="number" style="color:rgb(42,161,152)">500</span>deg)</span> 
<span class="function" style="">grayscale(<span class="number" style="color:rgb(42,161,152)">0.3</span>)</span> 
<span class="function" style="">sepia(<span class="number" style="color:rgb(42,161,152)">0.7</span>)</span> <span class="function" style="">
contrast(<span class="number" style="color:rgb(42,161,152)">1.5</span>)</span> <span class="function" style="">invert(
<span class="number" style="color:rgb(42,161,152)">0.2</span>)</span> <span class="function" style="">brightness(.
<span class="number" style="color:rgb(42,161,152)">9</span>)</span>;</span></span>  
  <span class="rule" style="">}</span></span> 




有关于CSS3的filter就简单的介绍到这里了,如果大家想更清楚的了解filter是神马,可以点击下面的扩展阅读:

51可用模板(代码)网站专为广大站长朋友提供精品模板与代码,同时免费提供网站收录。
本站域名: WWW.51KYDM.COM    联系方式:QQ:182468923    手机:18111646936
本站关键词:网站链接收录网址收录入口网站免费提交收录网站收录提交入口    网站地图
51可用模板
展开