利用css3实现新海诚画风
距离诚哥的新作《 你的名字 》即将上映的时间还有一周多。新海诚迷们在当今各种美图软件盛行的时期，开始了新的PS探索。作为一个直男单身码农，如何凭借代码撩妹，因此结合最近关于css3的滤镜应用，我颇有体会，用在这里就是感同
身受。
在介绍滤镜之前，首先需要了解关于HSL色彩模型。
HSL色彩模型：
HSL使用色相、饱和度、亮度三个分量描述色彩。
色相（Hue）：在实际应用中，我们需要记住色相环上的六大主色，用作基本参照：360°/0°红、60°黄、120°绿、180°青、240°蓝、300°洋红，它们在色相环上按照60°圆心角的间隔排列。
饱和度（saturation）：指的是色彩的饱和度，它用0%至100%的值描述了相同色相、明度下色彩纯度的变化。数值越大，颜色中的灰色越少，颜色越鲜艳，呈现一种从理性(灰度)到感性(纯色)的变化。
亮度（lightness）：指的是色彩的明度，作用是控制色彩的明暗变化。它同样使用了0%至100%的取值范围。数值越小，色彩越暗，越接近于黑色；数值越大，色彩越亮，越接近于白色。
下面提供一个资源，里面有详细介绍:HSL色彩模型
我们刚才对于HSL有了大致的了解，现在就步入正题，介绍一个css3的新属性–filter。就是它能让你get新海诚的画风。
语法结构：
filter:<filter-function> [<filter-function>]* | none
看了语法结构我们就会知道，关键的招数就是filter函数。接下来就隆重请出我们10个基本方法。
1.blur(): 增加图像的模糊度。单位px,数值越大，模糊程度越高。
举例：filter:blur(2px);效果：
2.opactiy(): 改变图像的透明程度。值为0%则是完全透明，值为100%则图像无变化。值在0%和100%之间， 若值未设置，值默认是1。该函数与已有的opacity属性很相似，不同之处在于通过filter，一些浏览器为了提升性能会提供硬件加速。
举例：filter:opacity(70%);效果：
3.drop-shadow(): 给图像设置一个阴影效果。阴影是合成在图像下面，可以有模糊度的，可以以特定颜色画出的遮罩图的偏移版本。函数接受
<shadow>（在CSS3背景中定义）类型的值，除了“inset”关键字是不允许的。该函数与已有的box-shadow box-shadow属性很相似；不同之处在于，通过滤镜，一些浏览器为了更好的性能会提供硬件加速。举例：filter:drop-shadow(2px 2px 2px grey);效果：
4.grayscale():将图片转化为灰度图片。默认图片灰度为0，图像变化范围为0%-100%。
举例：filter:grayscale(20%);效果：
5.invert():反转图像，效果就如照片底板。取值范围（0%-100%）。
举例：filter:invert(70%);效果：
6.brightness():调节图片的亮度，值越小图片越黑，值越大图片偏白。默认值为1。
举例：filter:brightness(2);效果：
7.contrast():调整图像的对比度。值是0%的话，图像会全黑。值是100%，图像不变。值可以超过100%，意味着会运用更低的对比。若没有设置值，默认是1。
举例：filter：contrast(2.6);效果：
8.hue-rotate():旋转色相，改变图像色彩。单位deg,所得值是相对当前值旋转色相环得到新的色相值。
举例：filter：hue-rotate(-55deg);效果：
9.saturate():转换图像饱和度。值定义转换的比例。值为0%则是完全不饱和，值为100%则图像无变化。其他值，则是效果的线性乘子。超过100%的值是允许的，则有更高的饱和度。 若值未设置，值默认是1。
举例：filter：saturate(200%);效果：
10.sepia():将图片转化为深褐色。值为100%则完全是深褐色的，值为0%图像无变化。值在0%到100%之间，则是效果的线性乘子。若未设置，值默认是0。
举例：filter：sepia(95%);效果:
11.介绍完这十种方法，小伙伴应该大致有一个了解，最后来一个混合效果完成诚哥画风。
举例： filter:hue-rotate(19deg) saturate(156%) contrast(218%) brightness(1.6)效果：
filter就介绍这些，大家下去可以试试了。
