利用scale实现缩放菜单
2020-03-03 本文已影响0人
小雪洁
原理是：菜单的下拉选项整体初始设置为transform:scale(0);，鼠标滑过标题时，设置该下拉选项块为 transform:scale(1,1);
效果图：
缩放菜单.gif
代码如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>缩放菜单</title>
<style>
main{
position: absolute;
top:50%;
left:50%;
transform: translate(-50%,-50%);
}
main ul{
display: flex;
list-style:none;
}
main ul li{
margin-right: 5px;
width: 100px;
display: flex;
flex-direction: column;
}
main ul li strong{
background: #009E94;
padding: 5px;
}
main li strong+div{
display: flex;
flex-direction: column;
background: #00FFFF;
transform: scale(0,0);
transition: 1s; /* 此处控制缩放的过渡时间*/
/*注意不要加在hover的时候，否则只会在hover时有过渡效果 */
transform-origin: top left;
}
main li strong+div a{
padding: 5px;
}
/* 鼠标滑过li时，strong后面的div出现 */
main ul li:hover strong+div{
transform: scale(1,1);
}
</style>
</head>
<body>
<main>
<ul>
<li>
<strong>前端基础</strong>
<div>
<a>HTML5</a>
<a>css3</a>
<a>javascript</a>
</div>
</li>
<li>
<strong>框架</strong>
<div>
<a>angular</a>
<a>vue</a>
<a>react</a>
</div>
</li>
</ul>
</main>
</body>
</html>
