`

CSS3 Filter的十种特效

    博客分类：
  • CSS
CSS 
阅读更多

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

 

 我想光看上面的效果就能吸引你了，要是你自己动手的话，我想您更会感到神奇。细一看，这些效果就像是photoshop整出来的一样，其实是真是这样的，有很多效果都是类似于photoshop中的特效。

不过有一点大家需要特别的注意：此处的CSS3 filter和css filter完全是两样东东。更不是我们一直说的IE滤镜。具体所指的是什么？大家感兴趣的可以点击这里。我就不多说了，因为说也说不清楚，我只想和大家一起探讨的是如何使用这个“CSS3 Filter”。

那我们开始吧。

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

 

例子：

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <meta name="viewport"
          content="initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no, width=device-width">
    <meta content="telephone=no" name="format-detection">
    <style type="text/css">
        . * {
            margin: 0;
            padding: 0;
        }

        ul {
            width: 1000px;
            margin: 0 auto;
        }

        li {
            border: 1px solid #ccc;
            padding: 10px;
            margin: 5px;
            float: left;
            list-style: none outside none;
            text-align: center;
            width: 35%;
        }

        li a,
        li span,
        li pre {
            display: block;
            cursor: pointer;
            text-align: center;
        }

        li span {
            border-top: 2px solid #ccc;
            margin-top: 5px;
        }

        li a img {
            margin: 0 5px;
            width: 128px;
        }

        li pre {
            background-color: #FEFBF3;
            border: 1px solid #1684C8;
            color: #195F91;
            font-family: Monaco, "Bitstream Vera Sans Mono", "Lucida Consol", "Courier New", Courier, monospace;
            padding: 5px;
            font-size: 12px;
        }

        li a img {
            -webkit-transition: all .5s ease-in-out;
            -moz-transition: all .5s ease-in-out;
            -ms-transition: all .5s ease-in-out;
            -o-transition: all .5s ease-in-out;
            transition: all .5s ease-in-out;

        }
        li a:hover img {
            -webkit-filter: none;
        }

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

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

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

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

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

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

        li a .opacity {
            -webkit-filter: opacity(.2);
            filter: alpha(opacity=20);
        }

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

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

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

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

        li a .custom {
            filter:alpha(opacity=50);/*filter 过滤器   兼容IE678*/
            -webkit-filter: saturate(5) hue-rotate(500deg) grayscale(0.3) sepia(0.7) contrast(1.5) invert(0.2) brightness(.9);
        }
    </style>
</head>
<body>
<ul class="demo">
    <li>
        <a href="#"><img class="normal" title="normal" width="128" height="128" alt="HTML5 Logo"
                         src="http://www.w3cplus.com/sites/default/files/filter.jpg"/></a>
        <span>normal(无filter效果)</span>
        <pre>-webkit-filter:none;</pre>
    </li>
    <li>
        <a href="#">
            <img class="normal" title="normal" width="128" height="128" alt="HTML5 Logo"
                 src="http://www.w3cplus.com/sites/default/files/filter.jpg"/>
            <img class="grayscale" title="grayscale" width="128" height="128" alt="HTML5 Logo"
                 src="http://www.w3cplus.com/sites/default/files/filter.jpg"/>
        </a>
        <span>grayscale（灰度）</span>
        <pre>-webkit-filter:grayscale(1);</pre>
    </li>
    <li>
        <a href="#">
            <img class="normal" title="normal" width="128" height="128" alt="HTML5 Logo"
                 src="http://www.w3cplus.com/sites/default/files/filter.jpg"/>
            <img class="sepia" title="sepia" width="128" height="128" alt="HTML5 Logo"
                 src="http://www.w3cplus.com/sites/default/files/filter.jpg"/>
        </a>
        <span>sepia（褐色）</span>
        <pre>-webkit-filter:sepia(1);</pre>
    </li>
    <li>
        <a href="#">
            <img class="normal" title="normal" width="128" height="128" alt="HTML5 Logo"
                 src="http://www.w3cplus.com/sites/default/files/filter.jpg"/>
            <img class="saturate" title="saturate" width="128" height="128" alt="HTML5 Logo"
                 src="http://www.w3cplus.com/sites/default/files/filter.jpg"/>
        </a>
        <span>saturate（饱和度）</span>
        <pre>-webkit-filter:saturate(.5);</pre>
    </li>
    <li>
        <a href="#">
            <img class="normal" title="normal" width="128" height="128" alt="HTML5 Logo"
                 src="http://www.w3cplus.com/sites/default/files/filter.jpg"/>
            <img class="saturate2" title="saturate" width="128" height="128" alt="HTML5 Logo"
                 src="http://www.w3cplus.com/sites/default/files/filter.jpg"/>
        </a>
        <span>saturate（饱和度）</span>
        <pre>-webkit-filter:saturate(3);</pre>
    </li>
    <li>
        <a href="#">
            <img class="normal" title="normal" width="128" height="128" alt="HTML5 Logo"
                 src="http://www.w3cplus.com/sites/default/files/filter.jpg"/>
            <img class="hue-rotate" title="hue-rotate" width="128" height="128" alt="HTML5 Logo"
                 src="http://www.w3cplus.com/sites/default/files/filter.jpg"/>
        </a>
        <span>hue-rotate（色相旋转）</span>
        <pre> -webkit-filter:hue-rotate(90deg);</pre>
    </li>
    <li>
        <a href="#">
            <img class="normal" title="normal" width="128" height="128" alt="HTML5 Logo"
                 src="http://www.w3cplus.com/sites/default/files/filter.jpg"/>
            <img class="invert" title="invert" width="128" height="128" alt="HTML5 Logo"
                 src="http://www.w3cplus.com/sites/default/files/filter.jpg"/>
        </a>
        <span>invert（反色）</span>
        <pre>-webkit-filter:invert(1);</pre>
    </li>
    <li>
        <a href="#">
            <img class="normal" title="normal" width="128" height="128" alt="HTML5 Logo"
                 src="http://www.w3cplus.com/sites/default/files/filter.jpg"/>
            <img class="opacity" title="opacity" width="128" height="128" alt="HTML5 Logo"
                 src="http://www.w3cplus.com/sites/default/files/filter.jpg"/>
        </a>
        <span>opacity（透明度）</span>
        <pre>-webkit-filter:opacity(.2);</pre>
    </li>
    <li>
        <a href="#">
            <img class="normal" title="normal" width="128" height="128" alt="HTML5 Logo"
                 src="http://www.w3cplus.com/sites/default/files/filter.jpg"/>
            <img class="brightness" title="brightness" width="128" height="128" alt="HTML5 Logo"
                 src="http://www.w3cplus.com/sites/default/files/filter.jpg"/>
        </a>
        <span>brightness（亮度）</span>
        <pre>-webkit-filter:brightness(.5);</pre>
    </li>
    <li>
        <a href="#">
            <img class="normal" title="normal" width="128" height="128" alt="HTML5 Logo"
                 src="http://www.w3cplus.com/sites/default/files/filter.jpg"/>
            <img class="contrast" title="contrast" width="128" height="128" alt="HTML5 Logo"
                 src="http://www.w3cplus.com/sites/default/files/filter.jpg"/>
        </a>
        <span>contrast（对比度）</span>
        <pre>-webkit-filter:contrast(2);</pre>
    </li>
    <li>
        <a href="#">
            <img class="normal" title="normal" width="128" height="128" alt="HTML5 Logo"
                 src="http://www.w3cplus.com/sites/default/files/filter.jpg"/>
            <img class="blur" title="blur" width="128" height="128" alt="HTML5 Logo"
                 src="http://www.w3cplus.com/sites/default/files/filter.jpg"/>
        </a>
        <span>blur（模糊）</span>
        <pre>-webkit-filter:blur(3px);</pre>
    </li>
    <li>
        <a href="#">
            <img class="normal" title="normal" width="128" height="128" alt="HTML5 Logo"
                 src="http://www.w3cplus.com/sites/default/files/filter.jpg"/>
            <img class="drop-shadow" title="drop-shadow" width="128" height="128" alt="HTML5 Logo"
                 src="http://www.w3cplus.com/sites/default/files/filter.jpg"/>
        </a>
        <span>drop-shadow（阴影）</span>
        <pre>-webkit-filter:drop-shadow(5px 5px 5px #ccc);</pre>
    </li>
    <li>
        <a href="#">
            <img class="normal" title="normal" width="128" height="128" alt="HTML5 Logo"
                 src="http://www.w3cplus.com/sites/default/files/filter.jpg"/>
            <img class="custom" title="drop-shadow" width="128" height="128" alt="HTML5 Logo"
                 src="http://www.w3cplus.com/sites/default/files/filter.jpg"/>
        </a>
        <span>drop-shadow（阴影）</span>
      <pre>
        -webkit-filter:
          saturate(5)
          hue-rotate(500deg)
          grayscale(0.3)
          sepia(0.7)
          contrast(1.5)
          invert(0.2)
          brightness(.9);
      </pre>
    </li>
</ul>

</body>
</html>

 

 

 

语法

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

 

浏览器的兼容性

目前支持这个属性的浏览器少得可怜，现在只是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);
      }

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

         ①grayscale灰度

         ②sepia褐色（求专业指点翻译）

         ③saturate饱和度

         ④hue-rotate色相旋转

         ⑤invert反色

          ⑥opacity透明度

         ⑦brightness亮度

         ⑧contrast对比度

          ⑨blur模糊

 

          ⑩drop-shadow阴影

 

 

默认值：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中的十种效果，当然大家可以根据自己的需求进行自定义：

      .custom{
            -webkit-filter:saturate(5) hue-rotate(500deg) grayscale(0.3) sepia(0.7) contrast(1.5) invert(0.2) brightness(.9);
        }

 

 

 

 

分享到：
| 移动端页面开发时需要注意的一些问题
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    css3 filter的十种特效测试

    这篇博客将深入探讨CSS3 Filter的十种特效，结合实例代码和图片展示，帮助你更好地理解和应用这一技术。 一、模糊（blur） 模糊滤镜可以将元素图像变得模糊，参数值表示模糊半径。例如： ```css img { filter: ...

    canvas学习（十九）：css3 filter的十种特效

    在本篇【canvas学习（十九）：css3 filter的十种特效】中，我们将深入探讨CSS3中的滤镜（filter）属性，这是一个强大的工具，能够为网页元素添加各种视觉效果。通过利用filter属性，我们可以无需复杂的图像编辑软件...

    CSS3特效-CSS3实现烟花特效

    最后，为了创建更加逼真的烟花特效，可以结合使用CSS3的box-shadow来模拟火花四溅的效果，或者使用CSS3的filter属性添加模糊（blur）和光照（brightness、contrast）效果。 总之，CSS3为我们提供了强大的工具来创建...

    CSS3 Filter图片滤镜特效.zip

    CSS3 Filter主要包括以下几种滤镜效果： 1. **模糊滤镜（blur）**：通过设置像素值，可以使图像变得模糊，创建出朦胧或梦幻的效果。例如，`filter: blur(5px);`将图像模糊化，模糊半径为5像素。 2. **亮度和对比度...

    Jquery Html5 Css几十种文字特效收集

    本资源集合了"Jquery Html5 Css几十种文字特效收集"，旨在为开发者提供丰富的灵感和工具，以实现超酷、超炫、稳重的文字效果。下面，我们将详细探讨这些标签所涵盖的技术和知识点。 首先，`文字特效`是前端开发中的...

    CSS3科技面部元素特效.zip

    这些特效通常通过CSS3的新特性来实现，比如选择器、动画、转换（transform）、过渡（transition）以及滤镜（filter）。下面将详细介绍这些CSS3知识点： 1. **选择器**：CSS3引入了更强大的选择器，如类选择器（....

    css3 filter滤镜属性制作图片滤镜特效

    在“css3 filter滤镜属性制作图片滤镜特效”这一主题中，我们将深入探讨如何利用CSS3滤镜来创建令人惊叹的图片特效。 首先，滤镜属性的基本语法是： ```css element { filter: function1(value) function2(value)...

    CSS3实现的酷炫流光页面动画特效源码

    此外，CSS3还提供了其他属性来增强流光动画，如透明度（opacity）、模糊效果（filter: blur()）或混合模式（mix-blend-mode）。通过巧妙地组合这些特性，可以创建出更加复杂且富有层次感的流光效果。 例如，我们...

    纯CSS3炫酷圆形头像图片过滤特效

    【纯CSS3炫酷圆形头像图片过滤特效】是一种利用CSS3的强大功能来实现的创新视觉效果。在网页设计中，头像图片的展示方式多种多样，但这种特效以其独特的魅力，吸引了许多开发者和设计师的关注。它将头像图片转换为...

    纯CSS3夜晚天空月亮动画特效

    【纯CSS3夜晚天空月亮动画特效】是一种利用CSS3的强大功能来实现的视觉效果，无需JavaScript的参与。这个特效展示了如何仅通过CSS样式语言就能创建动态的、交互式的网页元素，给用户带来丰富的视觉体验。 在CSS3中...

    CSS3绘制各种图形图标样式特效

    在现代网页设计中，CSS3已经成为了一种强大的工具，它不仅极大地增强了网页的视觉效果，还简化了开发者的工作流程。本教程将深入探讨如何利用CSS3来绘制各种图形图标，并实现丰富的样式特效，从而实现无需依赖任何...

    4种CSS3波浪文字动画特效

    在本文中，我们将深入探讨如何使用CSS3来创建四种不同的波浪文字动画特效。这些特效是通过结合CSS3的动画属性和文本元素的创新布局来实现的，为网站设计增添动感与活力。以下是对每种波浪文字动画特效的详细说明： ...

    28种CSS3炫酷loading页面加载动画特效代码

    总的来说，这个资源包中的28种CSS3加载特效展示了CSS3在动画设计方面的强大能力，不仅丰富了网页的视觉表现，也为用户提供了更好的互动体验。通过学习和实践这些代码，开发者可以提升自己的CSS3技能，为网站增添更多...

    基于CSS3的炫酷3D星空动画特效

    在现代网页设计中，利用CSS3的特性可以创建出各种令人惊叹的视觉效果，其中3D星空动画特效就是一个很好的例子。这个特效通过CSS3的3D变换、动画和光照效果，将网页背景变为一个动态的、仿佛深邃宇宙般的3D星空。下面...

    纯CSS3炫酷3D星空动画特效

    【标题】"纯CSS3炫酷3D星空动画特效"涉及了现代网页设计中的关键技能——CSS3的应用，特别是其在实现3D效果和动画功能上的潜力。CSS3是层叠样式表（Cascading Style Sheets）的第三个版本，极大地扩展了对网页样式...

    CSS3超酷模糊发光文字动画特效

    【CSS3超酷模糊发光文字动画特效】是一种利用CSS3的强大功能来创建吸引人眼球的文字视觉效果的技术。在网页设计中，动态且引人注目的文字可以极大地提升用户体验，增加网站的吸引力。以下是对这个特效的详细解释： ...

    CSS特效和JS+CSS特效

    在网页设计领域，CSS（Cascading Style Sheets）和JavaScript是两种至关重要的技术，它们共同构建了丰富多彩的网页视觉效果。CSS特效主要负责元素的样式、布局和动画，而JavaScript则为网页添加交互性，两者结合能...

    纯CSS3彩色粒子散开特效.zip

    【标题】"纯CSS3彩色粒子散开特效.zip"是一个包含使用纯CSS3技术实现的动态粒子散开特效的资源包。这个特效适用于网页设计，能够为网站增添视觉吸引力，提高用户体验。CSS3是 Cascading Style Sheets（层叠样式表）...

    15款css3鼠标悬停图片动画过渡特效.zip

    这个压缩包"15款css3鼠标悬停图片动画过渡特效.zip"显然包含了15个不同的CSS3实现，专门用于图片在鼠标悬停时的动态效果。这些效果可以为网站增添交互性和视觉吸引力，从而提高用户体验。 首先，我们来详细了解一下...

Magicbox
Global site tag (gtag.js) - Google Analytics