目录
1. 页面效果
2. 完整代码
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>隐藏菜单</title>
<style type="text/css">
/* 初始化页面 */
*{
margin:0;
padding:0;
}
body{
/* 100%窗口高度 */
height:100vh;
/* 渐变背景颜色 */
background:linear-gradient(#dad4ec,#f3e7e9);
}
ul{
/* 绝对定位，水平垂直居中 */
position:absolute;
top:50%;
left:50%;
transform:translate(-50%,-50%);
/* 弹性布局 */
display:flex;
margin:0;
padding:0;
}
ul li{
list-style:none;
/* 动画效果 */
transform:0.5s;
}
ul li a {
/* 相对定位 */
position: relative;
/* 将行内标签转化为块级标签 */
display:block;
/* 文字水平居中 */
text-align:center;
/* 设置字体样式 */
margin:0 20px;
color:#000000;
font-size:16px;
font-weight:bold;
text-decoration:none;
}
/* 鼠标移入时，文字整体淡化 */
ul:hover li{
opacity:0.2;
filter:blur(2px);
}
/* 鼠标移入单个菜单时，显示该菜单 */
ul li:hover{
opacity:1;
filter:blur(0px);
}
</style>
</head>
<body>
<ul>
<li><a href="#">首页</a></li>
<li><a href="#">关于我们</a></li>
<li><a href="#">服务</a></li>
<li><a href="#">案例</a></li>
<li><a href="#">用户反馈</a></li>
</ul>
</body>
</html>