搜索

CSS神奇而强大的filter属性,你绝对用得上!

前端下午茶

共 6594字，需浏览 14分钟

 ·

2022-03-23 10:13

作者：lulu_up原文：https://segmentfault.com/a/1190000041549883


状态从何而来？


在此之前我对css里面的filter属性不是很了解, 只知道使用这个属性来改变svg图片的颜色, 最近恰好查了很多相关文档并做了大量实验, 并有了一些启发与想法, 索性就在这里分享出来。



一、filter 滤镜



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






  "lulu" src="./img/头像.jpeg" />


06355af4e7fa3302436a6d566117183e.webp
     
看上图里的这些效果, 比如第一排第一个, 我们会想到在某些特定的纪念日网站整体会变成灰色的样式, 应该就是用的这个属性, 第二排的第一张就可以用与某些事物被"雷击"?

二、做一个'抖动'特效




8f2d6cd77ade91a1057a435ab87fc57f.webp

看到这张图我第一个想法就是做个抖动的特效, 就是那种很动感的效果:

6d3e8a6f61cad289fe58784ffa4529f6.webp
     
当然配合上一旋转效果也不错:

f50260c8f05402ac2ec6c610d9bd3068.webp
     
原理就是两个图片层叠在一起, 上面的图片进行放大与旋转动画:


"en">


  "UTF-8" />
  "X-UA-Compatible" content="IE=edge" />
  "viewport" content="width=device-width, initial-scale=1.0" />
  Document
  



  "box">
    "./img/头像.jpeg" />
    "mk" src="./img/头像.jpeg" />
  


  "box">
    "./img/头像.jpeg" />
    "mk2" src="./img/头像.jpeg" />
  





三、drop-shadow 阴影


filter属性通过设置drop-shadow为元素添加阴影, 可是早就有box-shadow属性了呀, 那这两个属性有什么区别了?


5cc9bfd1247e6b1ee90e7400ba6c32ea.webp


"en">


  "UTF-8" />
  "X-UA-Compatible" content="IE=edge" />
  "viewport" content="width=device-width, initial-scale=1.0" />
  Document
  



  "w1">九

  "w2">九





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

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


注意: 我这里使用的都是svg图片。

既然与box-shadow都有为元素设置阴影的能力, 那么box-shadow有复制自身样的能力drop-shadow是都也有?

     
所谓box-shadow的复制自身样式如图所示, box-shadow可以制作n个与元素本身形状相同或不同的样式, 下图右侧红色的方块就是左图的阴影:

d1a98b74e509c72c16b2c0091dc5d0d3.webp
     
再看一下drop-shadow的表现:

289f9f98cb4da62830c4e36294b44464.webp
     
看到上面的图我第一反应就是"猜人物"小游戏, 我们把人物的轮廓也就是右图显示出来, 然后在公布答案的时候展示左侧的原图即可。

赋值gif图有bug
    
 赋值gif图会有bug, 效果如下:

18bf3a85758ef6679d8f0e75b3c324cc.webp

五、drop-shadow 批量复制



box-shadow属性是可以写多个属性值的, 我一般会利用这个属性进行一个单一样式的dom元素的复制 效果如下图:

b6f24a56387a657aa1c9cfb88c9b977e.webp
     
drop-shadow有点'狠', 他的每一次复制都是基于上次的整体效果进行的阴影投射:

97952bd5ade8088c73ea99959549d86f.webp
     
上图可以看出, 第一个复制后是出现了横排的2个, 第二次投射是产生了下方的两个, 并且每次投射都是叠加的, 下面我们看一组更夸张的:

fe0aa5d3ff4bff8a4121926a4be6890a.webp
     
可想而知这种增长方式有多可怕, 稍微写几遍就可以覆盖满屏幕了。

"找不同"小游戏
     
我们可以做一片阴影, 但是其中某个我们单独做一个样式进行覆盖, 考考大家的眼力, 就如图例所示:

504e54badedceec18372d9ff0b35e97b.webp
     
这里就是利用drop-shadow产生阴影, 然后再进行一点修改, 正确答案在这里:

0f79a9cb94ed95a60b8809dfc7dc16fd.webp
     
所以只要再写两段代码, 就可以让这个8x8 变成16x16那么多, 应该还挺好玩的。

66edda789879b940e8c19b0d8327f184.webp

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

     

drop-shadow 与 box-shadow 都有投射的能力, 那么他两个属性共同作用于一个元素会是怎样的:

1632aeea95829e4c79f13955593d6187.webp
     
box-shadow会基于drop-shadow属性产生的全部投影进行透射阴影, 第一排是drop-shadow的投影, 第二排是box-shadow的投影, 具体怎么玩我还没想到太适合的。


"en">


    "UTF-8" />
    "X-UA-Compatible" content="IE=edge" />
    "viewport" content="width=device-width, initial-scale=1.0" />
    Document
    



    "wrap">
        "n" src="./svg/人.svg" /
    





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

     既然可以投射出那么多投影, 那么如果我元素进行旋转的话, 投影是否也会进行旋转? 并且它是以什么规律运动的那?
下面演示的是, 物体投影 + 物体本身旋转:


6c5ded5c0c4908535c30831de56773d2.webp


"en">


    "UTF-8" />
    "X-UA-Compatible" content="IE=edge" />
    "viewport" content="width=device-width, initial-scale=1.0" />
    Document
    



    "wrap">
        "n" src="./svg/人.svg" />
    





上面是整体以'元素'本身为旋转点进行旋转
那要如何让'元素'的每个投影都以自身为原点旋转那?

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


"en">


    "UTF-8" />
    "X-UA-Compatible" content="IE=edge" />
    "viewport" content="width=device-width, initial-scale=1.0" />
    Document
    



    "wrap">
        "box">
            "n" src="./svg/人.svg" />
        
    




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

     

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

轮廓的形成

并不是所有的图片被赋予drop-shadow属性后都会呈现出物体的轮廓, 投影会忽略透明背景的地方, 所以png这种可以定义透明背景的图片才可以被投射出相应的轮廓而不是矩形轮廓, svg同理。

比如jpg图片无法设置透明的背景, 所以其投影效果就与box-shadow相同了。

svg + png 投影变色

我们可以利用drop-shadow制作一个指定颜色的投影, 然后只要将元素本身隐藏, 只留下投影就ok了。

a66280c2649d6d8a5b63991e0cb50d73.webp

45563d64addf5bd1ca86e0342eb0e577.webp

eb363aa2797771a36159e4d3a1e41d36.webp


"en">


    "UTF-8" />
    "X-UA-Compatible" content="IE=edge" />
    "viewport" content="width=device-width, initial-scale=1.0" />
    Document
    



    

        "box2">
            "glasses2" src="./img/太阳镜.png" />
        

    



颜色的叠加变色有点强!

有没有办法是直接改变元素本身的颜色? 我尝试将drop-shadow投射在自身位置, 但是投射的阴影永远在元素后面, 我尝试将元素的opacity改小, 阴影也会随之变小, 如果设置opacity:0则投影也不可见了。

不管什么颜色无非是三原色合成的颜色, filter属性可以定义那么多种滤镜, 那是不是代表着某些滤镜效果的叠加态就是我们想要的目标颜色:

6a92fb84a809ba03b1fdb7949855e8d0.webp
     
手动生成那么多的属性不现实, 顺着这个思路我找到了一个真的这样做的网站:

为图片混合调色官网点击预览:https://codepen.io/sosuke/pen/Pjoqqp

fb1a7b2d89dc38e1b20d02c612bb6144.webp

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

九、局部清晰

    

这里所谓的局部清晰可以想象为, 某张图全部都是模糊的, 但是我们把一个放大镜放在某处, 此处就会变得清晰, 先看我做的效果:

d89ef77ee66d74036546ac90247b31e6.webp

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



"en">


  "UTF-8" />
  "X-UA-Compatible" content="IE=edge" />
  "viewport" content="width=device-width, initial-scale=1.0" />
  Document
  



  "wrap">
    "mk">
    

dfcb38038bac93146e9adbc01ad2b34a.webp点个喜欢支持我吧，在看就更好了
          
浏览
                    22
点赞
    
评论
    
收藏
    
分享
        
手机扫一扫分享
分享
    

        举报
    
评论
图片
表情
推荐
        
CSS filter 有哪些神奇用途
全栈前端精选
0
CSS filter有哪些神奇用途
web前端开发
0
CSS filter 有哪些神奇用途
程序员成长指北
0
【CSS】1095- CSS filter 有哪些神奇用途
前端自习课
0
【CSS】1149- CSS filter 有哪些神奇用途
前端自习课
0
你竟然是这么神奇的 CSS
前端瓶子君
0
你竟然是这么神奇的 CSS
程序员成长指北
0
你可能不知道的强大 HTML 属性
前端全栈开发者
0
你可能不知道的强大 HTML 属性
前端宇宙
0
15 个你不知道的 CSS 属性
大厂技术  高级前端  Node进阶点击上方 程序员成长指北，关注公众号回复1，加入高级Node交流群在Web 开发领域中，CSS（层叠样式表）是构建网站视觉美感和布局的支柱。虽然许多开发人员熟悉常用的 CSS 属性，但仍有大量隐藏的宝石等待被发现。
程序员成长指北
0
点赞
    
评论
    
收藏
    
分享
        
手机扫一扫分享
分享
    

        举报