CSS3 Filter 实现的十种特效


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

语法

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

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

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

所有滤镜的实例

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

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

.contrast {
    -webkit-filter: contrast(180%);
    filter: contrast(180%);
}

.grayscale {
    -webkit-filter: grayscale(100%);
    filter: grayscale(100%);
}

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

.invert {
    -webkit-filter: invert(100%);
    filter: invert(100%);
}

.opacity {
    -webkit-filter: opacity(50%);
    filter: opacity(50%);
}

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

.sepia {
    -webkit-filter: sepia(100%);
    filter: sepia(100%);
}

.shadow {
    -webkit-filter: drop-shadow(8px 8px 10px green);
    filter: drop-shadow(8px 8px 10px green);
}

效果图如下:

发表评论

电子邮件地址不会被公开。 必填项已用*标注