css3 滤镜filter属性

1、基本介绍

2、实现（hover观察效果）

        .blur {
            transition: filter .8s ease;
        }
        .blur:hover {
            -webkit-filter: blur(4px);
            filter: blur(4px);
        }
        .brightness {
            transition: filter .8s ease;
        }
        .brightness:hover {
            -webkit-filter: brightness(0.50);
            filter: brightness(0.50);
        }
        .contrast {
            transition: filter .8s ease;
        }
        .contrast:hover {
            -webkit-filter: contrast(180%);
            filter: contrast(180%);
        }
        .grayscale {
            transition: filter .8s ease;
        }
        .grayscale:hover {
            -webkit-filter: grayscale(100%);
            filter: grayscale(100%);
        }
        .huerotate {
            transition: filter .8s ease;
        }
        .huerotate:hover {
            -webkit-filter: hue-rotate(180deg);
            filter: hue-rotate(180deg);
        }
        .invert {
            transition: filter .8s ease;
        }
        .invert:hover {
            -webkit-filter: invert(100%);
            filter: invert(100%);
        }
        .opacity {
            transition: filter .8s ease;
        }
        .opacity:hover {
            -webkit-filter: opacity(50%);
            filter: opacity(50%);
        }
        .saturate {
            transition: filter .8s ease;
        }
        .saturate:hover {
            -webkit-filter: saturate(7);
            filter: saturate(7);
        }
        .sepia {
            transition: filter .8s ease;
        }
        .sepia:hover {
            -webkit-filter: sepia(100%);
            filter: sepia(100%);
        }
        .shadow {
            transition: filter .8s ease;
        }
        .shadow:hover {
            -webkit-filter: drop-shadow(8px 8px 10px #e9a526);
            filter: drop-shadow(8px 8px 10px #e9a526);
        }

<div class="filterBox">
        <ol>
            <li>blur(px)</li>
            <img class="blur" src="1.jpg" alt="william" width="840">
            <li>brightness(%)</li>
            <img class="brightness" src="1.jpg" alt="william" width="840">
            <li>contrast(%)</li>
            <img class="contrast" src="1.jpg" alt="william" width="840">
            <li>grayscale(%)</li>
            <img class="grayscale" src="1.jpg" alt="william" width="840">
            <li>hue-rotate(deg)</li>
            <img class="huerotate" src="1.jpg" alt="william" width="840">
            <li>invert(%)</li>
            <img class="invert" src="1.jpg" alt="william" width="840">
            <li>opacity(%)</li>
            <img class="opacity" src="1.jpg" alt="william" width="840">
            <li>saturate(%)</li>
            <img class="saturate" src="1.jpg" alt="william" width="840">
            <li>sepia(%)</li>
            <img class="sepia" src="1.jpg" alt="william" width="840">
            <li>drop-shadow(h-shadow v-shadow blur spread color)</li>
            <img class="shadow" src="1.jpg" alt="william" width="840">
        </ol>
    </div>

**

3、效果

原图

blur（）效果

grayscale（）效果

hue-rotate()效果