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

共 6594字，需浏览 14分钟

· 2022-03-23

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

状态从何而来？

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

一、filter 滤镜

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




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

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

二、做一个'抖动'特效

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

当然配合上一旋转效果也不错:

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


"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属性了呀, 那这两个属性有什么区别了?


"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个与元素本身形状相同或不同的样式, 下图右侧红色的方块就是左图的阴影:

再看一下drop-shadow的表现:

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

赋值gif图有bug

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

五、drop-shadow 批量复制

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

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

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

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

"找不同"小游戏

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

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

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

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

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

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 复制后的“运动”

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


"en">


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



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

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

这里的思路就是, 在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了。


"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属性可以定义那么多种滤镜, 那是不是代表着某些滤镜效果的叠加态就是我们想要的目标颜色:

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

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

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

九、局部清晰

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

这里的原理是这样的, 一共两层, 下层是模糊滤镜的图片,上层是一个圆形的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">
    

点个喜欢支持我吧，在看就更好了
          
浏览
                    14点赞
    
评论
    收藏
    
分享
        手机扫一扫分享
举报
评论
图片
表情
视频
全部评论
推荐
金融研究 | 使用Python测量关键审计事项的「信息含量」
Tips: 公众号推送后内容只能更改一次，且只能改20字符。如果内容出问题，或者想更新内容， 只能重复推送。为了更好的阅读体验，建议阅读本文博客版， 链接地址https://textdata.cn/blog/2023-01-13-information-content-of-critical-aud
大邓和他的Python
0
我看阿里的年终奖总算发了！
到4月底了，这两天看朋友圈，发现阿里的年终奖终于发了，问了问老同学，也从网上检索了不少信息，基本搞清楚了阿里今年的年终奖情况。近来来阿里一些集团对绩效等级做了较大的调整，以前的旧绩效系统中，绩效分为3.25、3.5、3.75、4和5五个等级，其中4和5是较高绩效等级，较少见。而且之前3.5绩效内部划
公子龙
0
金融研究(更新) | 使用Python构建关键审计事项的「信息含量」
Tips: 公众号推送后内容只能更改一次，且只能改20字符。如果内容出问题，或者想更新内容， 只能重复推送。为了更好的阅读体验，建议阅读本文博客版， 链接地址https://textdata.cn/blog/2023-01-13-information-content-of-critical-aud
大邓和他的Python
0
偷偷告诉你如何一台电脑开多个微信！
大家好，我是轩辕。前几天在粉丝群里，有人问我是怎么在一台电脑上同时登录两个微信的？正好之前写过一篇文章，分析过原理，分享给没看过的小伙伴学习一下。手机端多开微信估计很多人都知道，像华为、小米等手机系统都对此做了支持，不过在运行Windows系统的电脑上怎么启动两个微信呢？其实很简单，你只需要写一个批
编程技术宇宙
0
盘点Lombok的几个骚操作，你绝对没用过！
👉 欢迎加入小哈的星球 ，你将获得: 专属的项目实战 / Java 学习路线 / 一对一提问 / 学习打卡 /  赠书福利全栈前后端分离博客项目 2.0 版本完结啦， 演示链接：http://116.62.199.48/ ，新项目正在酝酿中
小哈学Java
0
堪称最优秀的Docker可视化管理工具——Portainer你真的会用吗？
来源：blog.csdn.net/shark_chili3007/article/details/123366179👉 欢迎加入小哈的星球 ，你将获得: 专属的项目实战 / Java 学习路线 / 一对一提问 / 学习打卡 /  赠书福利全栈前后端分离博客项目
小哈学Java
0
Apache Paimon毕业，湖仓架构的未来发展趋势！
北京时间 2024 年 4 月 16日，开源软件基金会 Apache Software Foundation（以下简称 ASF）正式宣布 Apache Paimon 毕业成为 Apache 顶级项目(TLP, Top Level Project)。经过社区的共同努力和持续创新，Apache Paim
程序源代码
0
JS的这些新特性，你都用过么？
大厂技术  高级前端  Node进阶点击上方 程序员成长指北，关注公众号回复1，加入高级Node交流群作为一门不断演进的语言，JavaScript每年都会引入新特性。这些特性的加入，能够帮助我们编写更加简洁、高效、易于维护的代码。然而，并非所有新特性
程序员成长指北
1
【深度学习】人人都能看懂的LSTM
熟悉深度学习的朋友知道，LSTM是一种RNN模型，可以方便地处理时间序列数据，在NLP等领域有广泛应用。在看了台大李宏毅教授的深度学习视频后，特别是介绍的第一部分RNN以及LSTM，整个人醍醐灌顶。本文就是对视频的记录加上了一些个人的思考。0. 从RNN说起循环神经网络（Recurrent Neur
机器学习初学者
0
我发现 Lombok的几个骚操作，哈哈好用
大家好，我是小富～前言本文不讨论对错，只讲骚操作。有的方法看看就好，知道可以这么用，但是否应用到实际开发中，那就仁者见仁，智者见智了。一万个读者就会有一万个哈姆雷特，希望这篇文章能够给您带来一些思考。耐心看完，你一定会有所收获。@onX例如 onConstructor, oMet
程序员内点事
0
点赞
    
评论
    收藏
    
分享
        手机扫一扫分享
举报