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

一、平行四边导航条

效果图：

代码：

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title><style>.rhomboid li {list-style: none;position: relative;display: inline-block;padding: 10px 15px;color: #fff;cursor: pointer;}.rhomboid li::after {content: '';position: absolute;left: 0;right: 0;bottom: 0;top: 0;border-radius: 5px;z-index: -1;background: #2175BC;transform: skewX(-25deg);}.rhomboid li:hover::after {background: #39a3f5;}</style></head><body><ul class='rhomboid'><li>首页</li><li>笔记</li><li>问问</li><li>学习</li><li>设置</li></ul></body></html>

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

二、梯形导航条

效果图：

代码：

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title><style>.rhomboid li {list-style: none;position: relative;display: inline-block;padding: 20px 15px 5px 15px;margin-left: -10px;color: #fff;cursor: pointer;}.rhomboid li::after {content: '';position: absolute;top: 0;bottom: 0;left: 0;right: 0;z-index: -1;background: #2175BC;border: 1px solid #fff;border-top-right-radius: 8px;border-top-left-radius: 8px;transform: perspective(0.5em) rotateX(5deg);transform-origin: bottom;}.rhomboid li:hover::after {background: #39a3f5;}</style></head><body><ul class='rhomboid'><li>首页</li><li>笔记</li><li>问问</li><li>学习</li><li>设置</li></ul></body></html>

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

如：

三、毛玻璃效果

效果图：

代码：

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title><style>.rascal {position: relative;background: rgba(255, 255, 255, 0.3);overflow: hidden;/*这里是去除模糊带来的溢出阴影*/height: 200px;width: 450px;}.rascal::after {z-index: -1;content: '';position: absolute;top: 0;bottom: 0;left: 0;right: 0;background: url(img/timg.jpg) no-repeat;background-size: cover;filter: blur(20px);}.rascal div {display: flex;justify-content: center;align-items: center;height: 100%;width: 200px;margin: 0 auto;background: url(img/timg.jpg) no-repeat;background-size: cover;}</style></head><body><div class='rascal'><div>背景毛玻璃效果</div></div></body></html>

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

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

【前端实例代码】使用 HTML 和 CSS 如何实现惊人的透明登录框页面毛玻璃效果| 前端开发网页制作基础入门教程
b站视频演示效果: [web前端特效源码]使用 HTML 和 CSS 如何实现惊人的透明登录框页面毛玻璃效果| 前端开发网页制作基础入门教程效果图: 完整代码: <!DOCTYPE htm ...
android底部导航栏毛玻璃,取消导航栏navigationBar的半透明/毛玻璃效果
Unity3d学习预设体(prefab)的一些理解之前一直在想如果要在Unity3d上创建很多个具有相同结构的对象,是如何做的,后来查了相关资料发现预设体可以解决这个问题! 预设体的概念: 组件的 ...
毛玻璃效果 php,CSS3教程之制作倾斜导航条和毛玻璃效果
这篇文章主要介绍了使用CSS3制作倾斜导航条和毛玻璃效果,需要的朋友可以参考下导航条对于每一个Web前端攻城狮来说并不陌生,但是毛玻璃可能会相对陌生一些.简单的说,毛玻璃其实就是让图片或者背景使用相 ...
使用CSS3制作倾斜导航条和毛玻璃效果
导航条对于每一个Web前端攻城狮来说并不陌生,但是毛玻璃可能会相对陌生一些.简单的说,毛玻璃其实就是让图片或者背景使用相应的方法进行模糊处理.这种效果对用户来说是十分具有视觉冲击力的. 本次分享的主题 ...
纯CSS实现下拉菜单及下拉容器等（纯CSS实现导航条及导航下拉容器）
原文:纯CSS实现下拉菜单及下拉容器等(纯CSS实现导航条及导航下拉容器) 虽然网上类似甚至相同的案例有很多,但是我还是写下,以记下笔记,也可供大家参考希望大家可以指导批评~~ 首先我们以列表ul ...
html导航条置顶,jquery导航菜单栏固定悬浮顶部实现效果
今天做了个固定定位的效果.比如对导航需要进行固定定位效果:当没有滚动到导航下面,导航正常显示.当滚动到导航下面,导航就固定到顶部. 一.css部分: fixed 生成绝对定位的元素,相对于浏览器窗口进 ...
html 隐藏_HTML实战篇：纯css制作二级横向以及竖向菜单导航
本篇文章主要给大家介绍一下如何使用html+css完成二级横向以及竖向菜单导航制作:菜单导航是网站建设中最常用的一块了,基本每个网站内都会有个导航菜单,用鼠标划过还可以有下拉子菜单. 由上图我们可以 ...
摘自迅雷视频网站基于CSS+HTML实现大气清新的蓝色导航
代码简介: 这个导航条做的不错,是模仿迅雷视频网站的,完全基于CSS和HTML代码,大气清新,请运行一下看看效果如何. 代码内容: <html xmlns="http://www.w3 ...
Html 5/CSS 的学习（二） —— Bootstrap 导航栏
参考 Bootstrap 导航栏 0. 导航栏类别 (1)默认导航栏:class="navbar navbar-default": (2)响应式导航栏:要折叠的内容必须包裹在cla ...

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

一、平行四边导航条

二、梯形导航条

三、毛玻璃效果

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

最新文章

热门文章