CSS 技巧记录 - 平行四边形导航条、梯形导航条、毛玻璃效果

原创 乘风逐月 随笔 CSS知识记录 286阅读 2018-07-24 09:19:39 举报

参考文章地址:使用CSS3制作导航条和毛玻璃效果

一、平行四边导航条

效果图:

代码:

实现思路: 使用css3 的 2D变形中的 skew() 倾斜属性,让伪元素倾斜而不是li倾斜,是为了让li的文本正常显示。

二、梯形导航条

效果图:

代码:

实现思路: 使用css3 3D 变形中的 perspective()、rotateX()、transform-origin。
perspective(): 用于设置用户和元素3D空间Z平面之间的距离,值越小,用户与3D空间Z平面距离越近,视觉效果会明显;反之,值越大,用户与3D空间Z平面距离越远,视觉效果越小。
rotateX(): 3D空间上X轴的旋转
tansform-origin: 指定元素的旋转中心点位置,可以控制梯形倾斜。值为bottom,不倾斜;值为left,左倾斜;值为right,右倾斜。
如:

三、毛玻璃效果

如图:

代码:

实现思路: 使用css3中的fiter滤镜,滤镜中的blur()用于将图片高斯模糊,值越大模糊效果越明显。伪元素模糊不会影响其他元素。

评论 ( 0 )
最新评论
暂无评论

赶紧努力消灭 0 回复