CSS神奇而强大的filter属性,你绝对用得上!
状态从何而来？
在此之前我对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" />
