前端 - 那些你不知道的炫酷导航交互效果_个人文章 - SegmentFault 思否
基于上次发布的 那些你不知道的炫酷按钮交互效果 反馈比较好,后续将继续收集那些炫酷的交互效果,希望可以给你的项目添砖加瓦,更上一层楼。那些你不知道的炫酷交互效果系列:那些你不知道的炫酷按钮交互效果那些
顺晟科技
2022-09-13 13:47:41
116
思路是: 我们不能直接对元素本身进行模糊处理,就对一个伪元素进行处理,然后将其定位到元素的下层,它的背景将会无缝匹配body的背景。margin-20px是用来扩大边距,因为模糊会在边缘减弱。
演示地址:http://www.sdfymj.com/invest/
代码如下:
body,main::before{ background: url("图片路径") 0 / cover fixed; } main{ position: relative; background: hska(0,0%,100%,.3); overflow: hidden; } main::before{ content: \'\', position: absolute; top:0;right:0;bottom:0;left:0; filter: blur(20px); margin:-30px; }
效果图:
31
2022-10
19
2022-10
15
2022-09
15
2022-09
15
2022-09
14
2022-09