【CSS】367- 用 CSS3 制作导航条和毛玻璃效果
点击上方“前端自习课”关注,学习起来~ 导航条对于每一个Web前端攻城狮来说并不陌生,但是毛玻璃可能会相对陌生一些。简单的说,毛玻璃其实就是让图片或者背景使用相应的方法进行模糊处理。这种效果对用户来说是十分具有视觉冲击力的。 本次分享的主题:通过CSS3来制作类似下面的导航条和毛玻璃效果。 导航条是梯形形状的。 背景区域的毛玻璃效果。 把导航条和毛玻璃效果在一篇文章中分享其实是有原因的。因为这两个效果的实现离不开一个重要的思想。 用语言来描述就是:父元素设置position:relative,其伪元素(after或者before)设置 position:absolute,并且让top,bottom,left,right都为0,伪元素占满父元素的整个空间,最后设置z-index将背景放在父元素后边。 具体代码如下。 .container { position : relative ; } .container::after { content : '' ; position : absolute ; left : 0 ; right : 0 ; bottom : 0 ; top : 0 ; z-index : -1 ; } 什么意思呢?稍安勿躁,我会在接下来的两个实战例子中对这段代码的意思一一道来。 1.导航条 1.1:平行四边形导航条 平行四边形制作的思想