CSSfilter

一、filter 滤镜

“滤镜”这个名字很贴切了, 可以理解成为元素添加各种显示效果, 先不用记各种名词咱们直接看效果, 使用方法 & 效果图:

  1. <style>
  2.   #lulu {
  3.      filter: grayscale(1);
  4.   }
  5. </style>
  7. <body>
  8.   <img id="lulu" src="./img/头像.jpeg" />
  9. </body>

CSS神奇而强大的filter属性 - 图1
看上图里的这些效果, 比如第一排第一个, 会想到在某些特定的纪念日网站整体会变成灰色的样式, 应该就是用的这个属性, 第二排的第一张就可以用与某些事物被”雷击”?

二、做一个’抖动’特效

CSS神奇而强大的filter属性 - 图2
看到这张图第一个想法就是做个抖动的特效, 就是那种很动感的效果:
CSS神奇而强大的filter属性 - 图3
当然配合上一旋转效果也不错:
CSS神奇而强大的filter属性 - 图4
原理就是两个图片层叠在一起, 上面的图片进行放大与旋转动画:

  1. <!DOCTYPE html>
  2. <html lang="en">
  4. <head>
  5.   <meta charset="UTF-8" />
  6.   <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  7.   <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  8.   <title>Document</title>
  9.   <style>
  10.     .box {
  11.       position: relative;
  12.       border: 1px solid gray;
  13.       display: flex;
  14.       overflow: hidden;
  15.       width: 110px;
  16.       padding: 0px;
  17.       margin-top: 100px;
  18.       margin-left: 300px;
  19.     }
  21.     .box>img {
  22.       width: 100px;
  23.       height: 100px;
  24.       margin-left: 6px;
  25.       filter: invert(1);
  26.     }
  28.     .mk {
  29.       position: absolute;
  30.       top: 0;
  31.       left: 0;
  32.       opacity: 0.5;
  33.       animation: cc 0.5s linear infinite;
  34.     }
  36.     @keyframes cc {
  37.       from {
  38.         transform: scale(1.2);
  39.       }
  41.       to {
  42.         transform: scale(1);
  43.       }
  44.     }
  46.     .mk2 {
  47.       position: absolute;
  48.       top: 0;
  49.       left: 0;
  50.       opacity: 0.5;
  51.       animation: cc2 0.5s linear infinite alternate;
  52.       border-radius: 50%;
  53.       overflow: hidden;
  54.     }
  56.     @keyframes cc2 {
  57.       from {
  58.         transform: scale(2.2) rotate(30deg);
  59.       }
  61.       to {
  62.         transform: scale(1) rotate(0deg);
  63.       }
  64.     }
  65.   </style>
  66. </head>
  68. <body>
  69.   <div class="box">
  70.     <img src="./img/头像.jpeg" />
  71.     <img class="mk" src="./img/头像.jpeg" />
  72.   </div>
  74.   <div class="box">
  75.     <img src="./img/头像.jpeg" />
  76.     <img class="mk2" src="./img/头像.jpeg" />
  77.   </div>
  78. </body>
  80. </html>

三、drop-shadow 阴影

filter属性通过设置drop-shadow为元素添加阴影, 可是早就有box-shadow属性了, 那这两个属性有什么区别了?
CSS神奇而强大的filter属性 - 图5

  1. <!DOCTYPE html>
  2. <html lang="en">
  4. <head>
  5.   <meta charset="UTF-8" />
  6.   <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  7.   <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  8.   <title>Document</title>
  9.   <style>
  10.     #w1 {
  11.       width: 50px;
  12.       height: 50px;
  13.       font-size: 36px;
  14.       font-weight: 900;
  15.       box-shadow: 0 0 2px red;
  16.     }
  18.     #w2 {
  19.       width: 50px;
  20.       height: 50px;
  21.       font-size: 36px;
  22.       font-weight: 900;
  23.       filter: drop-shadow(0px 0px 2px red);
  24.     }
  25.   </style>
  26. </head>
  28. <body>
  29.   <p id="w1">九</p>
  30.   <p id="w2">九</p>
  31. </body>
  33. </html>

上图可知, box-shadow是针对整个dom元素进行阴影的产生, 但是drop-shadow会忽略掉”透明”的部分。

四、drop-shadow 复制 (做一个看图猜人物游戏)

注意: 这里使用的都是svg图片。
既然与box-shadow都有为元素设置阴影的能力, 那么box-shadow有复制自身样的能力drop-shadow是都也有?
所谓box-shadow的复制自身样式如图所示, box-shadow可以制作n个与元素本身形状相同或不同的样式, 下图右侧红色的方块就是左图的阴影:
CSS神奇而强大的filter属性 - 图6
再看一下drop-shadow的表现:
CSS神奇而强大的filter属性 - 图7
看到上面的图第一反应就是”猜人物”小游戏, 把人物的轮廓也就是右图显示出来, 然后在公布答案的时候展示左侧的原图即可。

赋值gif图有bug

赋值gif图会有bug, 效果如下:
CSS神奇而强大的filter属性 - 图8

五、drop-shadow 批量复制

box-shadow属性是可以写多个属性值的, 一般会利用这个属性进行一个单一样式的dom元素的复制 效果如下图:
CSS神奇而强大的filter属性 - 图9
drop-shadow有点’狠’, 他的每一次复制都是基于上次的整体效果进行的阴影投射:
CSS神奇而强大的filter属性 - 图10
上图可以看出, 第一个复制后是出现了横排的2个, 第二次投射是产生了下方的两个, 并且每次投射都是叠加的, 下面看一组更夸张的:
CSS神奇而强大的filter属性 - 图11
可想而知这种增长方式有多可怕, 稍微写几遍就可以覆盖满屏幕了。

“找不同”小游戏

可以做一片阴影, 但是其中某个单独做一个样式进行覆盖, 考考大家的眼力, 就如图例所示:
CSS神奇而强大的filter属性 - 图12
这里就是利用drop-shadow产生阴影, 然后再进行一点修改, 正确答案在这里:
CSS神奇而强大的filter属性 - 图13
所以只要再写两段代码, 就可以让这个8x8 变成16x16那么多, 应该还挺好玩的。
CSS神奇而强大的filter属性 - 图14

六、drop-shadow 与 box-shadow的联合

drop-shadow 与 box-shadow 都有投射的能力, 那么他两个属性共同作用于一个元素会是怎样的:
CSS神奇而强大的filter属性 - 图15
box-shadow会基于drop-shadow属性产生的全部投影进行透射阴影, 第一排是drop-shadow的投影, 第二排是box-shadow的投影。

  1. <!DOCTYPE html>
  2. <html lang="en">
  4. <head>
  5.     <meta charset="UTF-8" />
  6.     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  7.     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  8.     <title>Document</title>
  9.     <style>
  10.         #wrap {
  11.             position: relative;
  12.             height: 350px;
  13.             width: 500px;
  14.             margin: 50px auto;
  15.             overflow: hidden;
  16.         }
  18.         #n {
  19.             border: 1px solid gray;
  20.             width: 50px;
  21.             box-shadow: 0 200px;
  22.             transform: rotate(10deg);
  23.             filter: drop-shadow(70px 0) drop-shadow(140px 0px);
  24.         }
  25.     </style>
  26. </head>
  28. <body>
  29.     <div id="wrap">
  30.       <img id="n" src="./svg/人.svg"/>
  31.     </div>
  32. </body>
  34. </html>

七、drop-shadow 复制后的“运动”

既然可以投射出那么多投影, 那么如果元素进行旋转的话, 投影是否也会进行旋转? 并且它是以什么规律运动的那?
下面演示的是, 物体投影 + 物体本身旋转:
CSS神奇而强大的filter属性 - 图16
上面是整体以’元素’本身为旋转点进行旋转
那要如何让’元素’的每个投影都以自身为原点旋转那?

  1. <!DOCTYPE html>
  2. <html lang="en">
  4. <head>
  5.     <meta charset="UTF-8" />
  6.     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  7.     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  8.     <title>Document</title>
  9.     <style>
  10.         #wrap {
  11.             position: relative;
  12.             height: 350px;
  13.             width: 400px;
  14.             margin: 250px auto;
  15.         }
  17.         #n {
  18.             width: 20px;
  19.             filter: drop-shadow(25px 0) drop-shadow(50px 0px) drop-shadow(100px 0);
  20.             animation: rr 2s linear infinite;
  21.         }
  23.         @keyframes rr {
  24.             0% {
  25.                 transform: rotate(0);
  26.             }
  28.             100% {
  29.                 transform: rotate(360deg);
  30.             }
  31.         }
  32.     </style>
  33. </head>
  35. <body>
  36.     <div id="wrap">
  37.         <img id="n" src="./svg/人.svg" />
  38.     </div>
  39. </body>
  41. </html>

CSS神奇而强大的filter属性 - 图17

这里的思路就是, 在img外包裹一层div, 对外层div进行投影, 内部的img负责旋转:

  1. <!DOCTYPE html>
  2. <html lang="en">
  4.   <head>
  5.     <meta charset="UTF-8" />
  6.     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  7.     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  8.     <title>Document</title>
  9.     <style>
  10.       #wrap {
  11.         position: relative;
  12.         height: 350px;
  13.         width: 400px;
  14.         margin: 250px auto;
  15.       }
  17.       #box {
  18.         width: 20px;
  19.         height: 20px;
  20.         filter: drop-shadow(25px 0) drop-shadow(50px 0px) drop-shadow(100px 0);
  21.       }
  23.       #n {
  24.         width: 20px;
  25.         animation: rr 2s linear infinite;
  26.       }
  28.       @keyframes rr {
  29.         0% {
  30.           transform: rotate(0);
  31.         }
  33.         100% {
  34.           transform: rotate(360deg);
  35.         }
  36.       }
  37.     </style>
  38.   </head>
  40.   <body>
  41.     <div id="wrap">
  42.       <div id="box">
  43.         <img id="n" src="./svg/人.svg" />
  44.       </div>
  45.     </div>
  46.   </body>
  48. </html>

八、filter属性着色(svg + png)图片

改变svg颜色最直接的方法就是改其本身的fill属性, 这里不做探讨, 这里要研究的是到底为什么filter可以改变图片的颜色, 是什么原理? 这里就一起探究一下(这里只讨论纯色图片)。

轮廓的形成

并不是所有的图片被赋予drop-shadow属性后都会呈现出物体的轮廓, 投影会忽略透明背景的地方, 所以png这种可以定义透明背景的图片才可以被投射出相应的轮廓而不是矩形轮廓, svg同理。
比如jpg图片无法设置透明的背景, 所以其投影效果就与box-shadow相同了。

svg + png 投影变色

可以利用drop-shadow制作一个指定颜色的投影, 然后只要将元素本身隐藏, 只留下投影就ok了。
CSS神奇而强大的filter属性 - 图18
CSS神奇而强大的filter属性 - 图19
CSS神奇而强大的filter属性 - 图20

  1. <!DOCTYPE html>
  2. <html lang="en">
  4. <head>
  5.     <meta charset="UTF-8" />
  6.     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  7.     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  8.     <title>Document</title>
  9.     <style>
  10.         #box2 {
  11.             display: inline-block;
  12.             overflow: hidden;
  13.         }
  15.         #glasses2 {
  16.             filter: drop-shadow(200px 0 red);
  17.             transform: translateX(-200px);
  18.         }
  19.     </style>
  20. </head>
  22. <body>
  23.     <div>
  24.         <div id="box2">
  25.             <img id="glasses2" src="./img/太阳镜.png" />
  26.         </div>
  27.     </div>
  28. </body>
  29. </html>

颜色的叠加变色有点强!

有没有办法是直接改变元素本身的颜色? 尝试将drop-shadow投射在自身位置, 但是投射的阴影永远在元素后面, 尝试将元素的opacity改小, 阴影也会随之变小, 如果设置opacity:0则投影也不可见了。
不管什么颜色无非是三原色合成的颜色, filter属性可以定义那么多种滤镜, 那是不是代表着某些滤镜效果的叠加态就是想要的目标颜色:
CSS神奇而强大的filter属性 - 图21
手动生成那么多的属性不现实, 顺着这个思路找到了一个真的这样做的网站:
为图片混合调色官网点击预览:https://codepen.io/Fcant/pen/GRyNoeK
点击查看【codepen】
CSS神奇而强大的filter属性 - 图22

  1. 需要多点几次Compute Filters按钮, 直到生成差异度较小的属性。
  2. 如果元素不是纯黑色, 需要先赋予 filter: brightness(0) saturate(100%) 将其变为纯黑, 因为不同的底色需要变成目标颜色的filter属性不同。
  3. 实际项目中不会这样去做的。

    九、局部清晰

    这里所谓的局部清晰可以想象为, 某张图全部都是模糊的, 但是把一个放大镜放在某处, 此处就会变得清晰, 先看效果:
    CSS神奇而强大的filter属性 - 图23
    CSS神奇而强大的filter属性 - 图24

这里的原理是这样的, 一共两层, 下层是模糊滤镜的图片,上层是一个圆形的div, 并且这个div的背景图是图片的清晰版, 设置background-position, 在拖动div的同时, 实时变换背景的background-position位置, 就实现了图里的效果。

  1. <!DOCTYPE html>
  2. <html lang="en">
  4. <head>
  5.   <meta charset="UTF-8" />
  6.   <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  7.   <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  8.   <title>Document</title>
  9.   <style>
  10.     * {
  11.       box-sizing: border-box;
  12.     }
  14.     #wrap {
  15.       position: relative;
  16.     }
  18.     #acc {
  19.       position: absolute;
  20.       left: 0;
  21.       right: 0;
  22.       width: 540px;
  23.       filter: blur(7px);
  24.       pointer-events: none;
  25.     }
  27.     #mk {
  28.       z-index: 2;
  29.       height: 100px;
  30.       width: 100px;
  31.       border-radius: 50%;
  32.       overflow: hidden;
  33.       border: 1px solid blue;
  34.       position: absolute;
  35.       left: 0;
  36.       top: 0;
  37.       background-image: url("./img/利姆露jpeg.jpeg");
  38.       background-size: 540px 562px;
  39.       background-position: 0 0;
  40.       background-repeat: no-repeat;
  41.     }
  42.   </style>
  43. </head>
  45. <body>
  46.   <div id="wrap">
  47.     <div id="mk"></div>
  48.     <img id="acc" src="./img/利姆露jpeg.jpeg" />
  49.   </div>
  50.   <script>
  51.     function drag(elementId) {
  52.       const element = document.getElementById(elementId);
  53.       const position = {
  54.         offsetX: 0,
  55.         offsetY: 0,
  56.         state: 0,
  57.       }
  58.       function getEvent(event) {
  59.         return event || window.event;
  60.       }
  61.       element.addEventListener(
  62.         "mousedown",
  63.         function (event) {
  64.           var e = getEvent(event);
  65.           position.offsetX = e.offsetX;
  66.           position.offsetY = e.offsetY;
  67.           position.state = 1;
  68.         },
  69.         false
  70.       );
  71.       document.addEventListener(
  72.         "mousemove",
  73.         function (event) {
  74.           var e = getEvent(event);
  75.           if (position.state) {
  76.             position.endX = e.clientX;
  77.             position.endY = e.clientY;
  78.             element.style.top = position.endY - position.offsetY + "px";
  79.             element.style.left = position.endX - position.offsetX + "px";
  80.             element.style.backgroundPositionX = "-" + element.style.left;
  81.             element.style.backgroundPositionY = "-" + element.style.top;
  82.           }
  83.         },
  84.         false
  85.       );
  86.       element.addEventListener(
  87.         "mouseup",
  88.         function (event) {
  89.           position.state = 0;
  90.         },
  91.         false
  92.       );
  93.     }
  94.     drag("mk");
  95.   </script>
  96. </body>
  98. </html>