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

最新推荐文章于 2025-05-13 00:48:22 发布

有人爱的笨小孩

最新推荐文章于 2025-05-13 00:48:22 发布

阅读量2k

点赞数 1

CC 4.0 BY-SA版权

分类专栏： CSS 文章标签： CSS

本文链接：https://blog.youkuaiyun.com/lc520dy1314/article/details/84585393

CSS 专栏收录该内容

2 篇文章

订阅专栏

本文介绍了使用CSS3实现的两种创意导航条设计和平滑的毛玻璃背景效果。包括平行四边形和梯形导航条的制作方法，以及如何利用filter属性创建毛玻璃效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一、平行四边导航条

效果图：

代码：

<!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()用于将图片高斯模糊，值越大模糊效果越明显。伪元素模糊不会影响其他元素。