zoukankan      html  css  js  c++  java
  • CSS3 滤镜 webkitfilter 的介绍和使用

    大家可能对 Instagram 这款 iPhone APP 上的滤镜效果很感兴趣,其实 CSS3 开始也有滤镜(不是 IE 的那种滤镜),这些滤镜效果最初是用于 SVG 的,W3C 将其引入到 CSS3 中,然后制定了 CSS Filter Effects 1.0 的规范,Webkit 率先支持了它。

    -webkit-filter 的用法

    -webkit-filter 用法是标准的 CSS 写法,如:

    -webkit-filter: blur(2px);

    -webkit-filter 支持的效果有:

    • blur 模糊
    • brightness 亮度
    • contrast 对比度
    • drop-shadow 阴影
    • grayscale 灰度
    • opacity 透明度
    • sepia 褐色
    • invert 反色
    • saturate 饱和度
    • hue-rotate 色相旋转

    下面是这几种滤镜具体的效果和代码,请在最新的 Safari 和 Chrome 浏览器上查看效果:

    原图

    blur 模糊

    -webkit-filter:blur(2px);

    brightness 亮度

    -webkit-filter:brightness(25%);

    contrast 对比度

    -webkit-filter: contrast(50%);

    drop-shadow 阴影

    -webkit-filter: drop-shadow(5px 5px 5px rgba(0, 0, 0, 0.5));

    opacity 透明度

    -webkit-filter: opacity(50%);

    grayscale 灰度

    -webkit-filter: grayscale(80%);

    sepia 褐色

    -webkit-filter: sepia(100%);

    invert 反色

    -webkit-filter: invert(100%);

    hue-rotate 色相旋转

    -webkit-filter:hue-rotate(180deg);

    saturate 饱和度

    -webkit-filter: saturate(1000%);

    http://fairyfish.net/m/webkit-filter/

    欢迎到我的网站看看
  • 相关阅读:
    win7(64bit)python相关环境模块搭建
    memcached在windows下的安装与命令使用方法
    pomelo流程
    pomelo 初始化配置...
    pomelo组件..
    <转>如何高效快速看懂Android源码
    源码学习
    计划
    Android面试题集锦 (转)
    Android 面试题(转)
  • 原文地址:https://www.cnblogs.com/Caiyinsoft/p/2835718.html
Copyright © 2011-2022 走看看