你不知道的css滤镜技巧

简单来说，CSS 滤镜就是提供类似 PS 的图形特效，像模糊，锐化或元素变色等功能。通常被用于调整图片，背景和边界的渲染。
本文就简单介绍几种滤镜的使用。

css几种常用的滤镜技巧：

1. 使用 filter: blur() 生成毛玻璃效果
2. 使用 filter: drop-shadow() 生成整体阴影效果
3. 使用 filter: opacity() 生成透明度
   看下效果：
   

brightness/contrast —— hover时增大图片亮度

通常页面上的按钮，都会有 hover/active 的颜色变化，以增强与用户的交互。但是一些图片展示，则很少有 hover 的交互，运用 filter: contrast() 或者 filter: brightness() 可以在 hover 图片的时候，调整图片的对比图或者亮度，达到聚焦用户视野的目的。

brightness表示亮度，contrast 表示对比度。

img:hover{
     filter: brightness(1.1);
     filter: contrast(110%);
 }

brightness(1.1)和contrast(110%)的效果相同。

blur — 生成图像阴影

通常而言，我们生成阴影的方式大多是 box-shadow 、filter: drop-shadow() 、text-shadow 。但是，使用它们生成阴影是阴影只能是单色的。虽然filter:blur()也不能生成彩色的阴影，但是我们可以通过巧妙的利用 filter: blur 模糊滤镜，我们可以假装生成渐变色或者说是颜色丰富的阴影效果。

.img-box{
    position: relative;
    width: 500px;
    height: 300px;
    left: 100px;
    background: url("images/titleBg.png") no-repeat center center;
    background-size: 100%;
}
.img-box:after{
    content: "";
    position: absolute;
    top: 5%;
    z-index: -1;
    height: 100%;
    width: 100%;
    background: url("images/titleBg.png") no-repeat center center;
    -webkit-background-size: 100%;
    background-size: 100%;
    filter: blur(10px) brightness(80%) opacity(.8);
}

blur 混合 contrast 产生融合效果

（参考其他博客内容）
单独将两个滤镜拿出来，它们的作用分别是：

filter: blur()： 给图像设置高斯模糊效果。
filter: contrast()： 调整图像的对比度。

但是，当他们“合体”的时候，产生了奇妙的融合现象，通过对比度滤镜把高斯模糊的模糊边缘给干掉，利用高斯模糊实现融合效果。

.filter-mix {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 300px;
    height: 200px;
    filter: contrast(20);
    background: #ccc;
}

.filter-mix::before {
    content: "";
    position: absolute;
    width: 120px;
    height: 120px;
    border-radius: 50%;
    background: #333;
    top: 40px;
    left: 40px;
    z-index: 2;
    filter: blur(6px);
    box-sizing: border-box;
    animation: filterBallMove 4s ease-out infinite;
}

.filter-mix::after {
    content: "";
    position: absolute;
    width: 80px;
    height: 80px;
    border-radius: 50%;
    background: #3F51B5;
    top: 60px;
    right: 40px;
    z-index: 2;
    filter: blur(6px);
    animation: filterBallMove2 4s ease-out infinite;
}

@keyframes filterBallMove {
    50% {
        left: 140px;
    }
}

@keyframes filterBallMove2 {
    50% {
        right: 140px;
    }
}

两圆相交的过程，在边与边接触的时候，会产生一种边界融合的效果。

上述效果的实现基于两点：

1.图形是在被设置了 filter: contrast() 的画布背景上进行动画的
2.进行动画的图形被设置了 filter: blur()（ 进行动画的图形的父元素需要是被设置了 filter: contrast() 的画布）

意思是，上面两圆运动的背后，其实是叠加了一张设置了 filter: contrast() 的大白色背景，而两个圆形则被设置了 filter: blur() ，两个条件缺一不可。

文字融合动画

h1 {
    font-family: Righteous;
    color: white;
    font-size: 4rem;
    text-transform: uppercase;
    line-height: 1;
    animation: letterspacing 5s infinite alternate ease-in-out;
    display: block;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate3d(-50%, -50%, 0);
    letter-spacing: -2.2rem;
}

@keyframes letterspacing {
    0% {
        letter-spacing: -2.2rem;
        filter: blur(.3rem);
    }

    50% {
        filter: blur(.5rem);
    }

    100% {
        letter-spacing: .5rem;
        filter: blur(0rem);
        color: #fff;
    }
}