2D转换之翻转菜单-CSS
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>翻转菜单-CSS</title>
<style>
*{
margin: 0px;
padding: 0px;
}
#gk-nav
{
width: 400px;
height: 40px;
background: red;
margin: 0px auto;
display: block;
}
#gk-nav>li{
float: left;
background: green;
width: 120px;
height: 40px;
margin-left: 10px;
margin-bottom: 0px;
text-align: center;
line-height: 40px;
list-style: none;
color: indigo;
/*导航栏需要盖住下面的内容-子绝父相*/
position: relative;
}
#gk-nav .sub{
/*导航栏需要盖住下面的内容-子绝父相*/
position: absolute;
left: 0px;
top: 40px;
width: 120px;
margin: 0;
}
#gk-nav>li:hover .sub li{
/*2D转换,设置为空*/
transform: none;
/*透明度*/
opacity: 1;
}
#gk-nav .sub li{
background: pink;
border: 1px solid #000;
/*设置默认的时候以Y轴180度旋转的方向->过渡的时候再旋转为正方向*/
transform: RotateY(180deg);
/*过渡效果 时长为2秒*/
transition: all 2s;
/*默认透明度为0*/
opacity: 0;
list-style: none;
}
/*为所有的二级菜单设置延迟，鼠标悬浮的时候越往上的菜单越早出现，移开的时候相反*/
#gk-nav>li:hover .sub li:nth-child(1){
transition-delay: 0.05s;
}
#gk-nav>li:hover .sub li:nth-child(2){
transition-delay: 0.1s;
}
#gk-nav>li:hover .sub li:nth-child(3){
transition-delay: 0.15s;
}
#gk-nav>li:hover .sub li:nth-child(4){
transition-delay: 0.2s;
}
#gk-nav>li:hover .sub li:nth-child(5){
transition-delay: 0.25s;
}
#gk-nav>li:hover .sub li:nth-child(6){
transition-delay: 0.3s;
}
#gk-nav .sub li:nth-child(6){
transition-delay: 0.05s;
}
#gk-nav .sub li:nth-child(5){
transition-delay: 0.1s;
}
#nav .sub li:nth-child(4){
transition-delay: 0.15s;
}
#gk-nav .sub li:nth-child(3){
transition-delay: 0.2s;
}
#gk-nav .sub li:nth-child(2){
transition-delay: 0.25s;
}
#gk-nav .sub li:nth-child(1){
transition-delay: 0.3s;
}
#gk{
width: 400px;
height: 300px;
background-color: red;
margin: 0 auto;
}
._img{
width: 400px;
height: 300px;
}
</style>
</head>
<body>
<ul id="gk-nav">
<li>
一级菜单
<ul class="sub">
<li>二级菜单</li>
<li>二级菜单</li>
<li>二级菜单</li>
<li>二级菜单</li>
<li>二级菜单</li>
<li>二级菜单</li>
</ul>
</li>
<li>
一级菜单
<ul class="sub">
<li>二级菜单</li>
<li>二级菜单</li>
<li>二级菜单</li>
<li>二级菜单</li>
<li>二级菜单</li>
<li>二级菜单</li>
</ul>
</li>
<li>
一级菜单
<ul class="sub">
<li>二级菜单</li>
<li>二级菜单</li>
<li>二级菜单</li>
<li>二级菜单</li>
<li>二级菜单</li>
<li>二级菜单</li>
</ul>
</li>
</ul>
<div id="gk"><img class="_img" src="http://gkismet.com/wp-content/uploads/2017/01/h1.jpg" alt="hzw"></div>
</body>
</html>
发表评论