昨天晚上，又接到一项任务——为网页加点动态效果。 我对着前端页面思考了好久，终于，在某一刻，我发现了在顶部导航栏里的几个“导航链接”！决定对它们下手。 因为有a链接的存在，所以融合了昨天所说的“鼠标移入下划线动画特效”（不会的点击下面链接） https://blog.csdn.net/qq_43624878/article/details/102714774
我觉得有必要说下一些基本知识点：
- 后面写的元素会盖住前面写的元素，定位的元素会“覆盖”没定位的元素
- 设置absolute时，最好加上top和left属性 （赋合适值），这样规范一些，也方便操作
- 对于“隐藏”，其实我们还可以用opacity ，当然，这样做有适用局限，但是不可否认，配合第一条适用的opacity属性不仅可以使“动画”达到完美效果，还可以减少页面回流与重绘，不是吗？
- 比如本章所说例，我在二级菜单的li上加opacity为none，在hover一级菜单后的二级菜单li上加opacity为1，就达到了效果。
- 在JS中，我们是怎么实现“鼠标移入响应”的呢？看下面用例。我们会用
document.querySelector(".nav>li").onmouseover=function(){document.querySelector(".sub li").cssText="opacity:1;transform:none;"}来实现，这样还好，但是像本例这样实现“每个li依次翻转出现”呢？恐怕轻易不能办到吧！
这也就显示出css现在的“魅力”了：我们完全可以这样写：
/* 这段代码和上面JS代码作用完全一致 */
.nav>li:hover .sub li{
transform: none;
opacity: 1;
}那我们怎么控制过渡元素的时间呢？
.sub li{
list-style: none;
background: pink;
transform: rotateY(180deg);
transition: all .6s;
opacity: 0;
}
.nav>li:hover .sub li{
transform: none; //这里其实相当于 transform:rotateY(0deg);
opacity: 1;
}这段代码中折射出这样一种思想：上一个元素的transition属性定义了下一个元素中的transform的规则（通常是时间） ： li开始时是沿y轴旋转了180°，而且是透明的，当鼠标移入.sub>li的父元素上时，.sub li用0.6s的时间转回来，并且显示出来。
下面来看下代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>纯css版-翻转二级菜单</title>
<style>
*{
margin: 0;
padding: 0;
}
.nav{
width: 400px;
height: 40px;
margin: 0 auto;
margin-top: 100px;
background: black;
}
.nav>li{
list-style: none;
float: left;
width: 120px;
height: 40px;
background: green;
margin-left: 10px;
text-align: center;
line-height: 40px;
position: relative;
}
.sub{
width: 120px;
position: absolute;
left: 0;
top: 40px;
}
.sub li{
list-style: none;
background: pink;
transform: rotateY(180deg);
transition: all .6s;
opacity: 0;
}
.nav>li:hover .sub{
will-change: transform
}
.nav>li:hover .sub li{
transform: none; //这里其实相当于 transform:rotateY(0deg);
opacity: 1;
}
/* 鼠标移入触发动画 */
.nav>li:hover .sub li:nth-child(1){
transition-delay: 0ms; //延迟属性
}
.nav>li:hover .sub li:nth-child(2){
transition-delay: 200ms;
}
.nav>li:hover .sub li:nth-child(3){
transition-delay: 400ms;
}
/* 这里是“返回”动画代码 */
.nav>li .sub li:nth-child(3){
transition-delay: 0ms;
}
.nav>li .sub li:nth-child(2){
transition-delay: 200ms;
}
.nav>li .sub li:nth-child(1){
transition-delay: 400ms;
}
/* 下面是a链接的下划线伸展动画代码 */
ul li>a{
cursor: pointer;
text-decoration: none;
color: white;
}
ul li:after{
content: "";
width: 0;
height: 2px;
background: rgb(255,170,0);
position: absolute;
top: 100%;
left: 50%;
transition: all .5s;
}
ul li:hover:after{
left: 0;
width: 100%;
}
</style>
</head>
<body>
<ul class="nav">
<li><a href="#">一级菜单</a>
<ul class="sub">
<li><a href="#">二级菜单</a></li>
<li><a href="#">二级菜单</a></li>
<li><a href="#">二级菜单</a></li>
</ul>
</li>
<li><a href="#">一级菜单</a></li>
<li><a href="#">一级菜单</a></li>
</ul>
</body>
</html>纯CSS的 :hover 开发（尤其是显示浮层问题）是需要“小心翼翼”的。
:hover确实很厉害，在大多数时候。但是如果用户是在手机、智能电视等无鼠标设备上，则此行为将会完全瘫痪，从而造成一些奇奇怪怪（没有脑袋）的行为！
对于交互的行为，即使使用纯CSS实现，也不要只使用:hover伪类，还需要其他的处理 —— 比如「:focus」聚焦！
