|
二级下拉菜单缓慢渐变
transition属性与display属性相冲突，不能使用这两种属性达到渐变效果。 transition属性与height属性结合， 初始时二级菜单高度为0， 通过溢出隐藏，使整个二级菜单在一开始就整个隐藏， 当鼠标悬停在一级菜单某项上时，通过高度的渐变，溢出部分逐渐减少，让二级菜单随着高度变化而显示出来， 达到二级下拉菜单缓慢渐变的效果。
HTML实验1
*{
margin:0px;
padding:0px;
}
header{
background:#b6ff00;
width:100%;
height:100px;
margin-bottom:10px;
position:relative;
}
nav{
position:absolute;/*相对于上面的用relative的元素*/
bottom:5px;
left:600px;
cursor:pointer;
}
ul{
list-style:none;
}
ul li {
float: left;
/*一级菜单向左浮动，使之水平排列*/
background:#b200ff;
text-decoration:none;
color:#ffffff;
font-weight:bold;
display:block;
line-height:40px;
padding:0px 10px;
}
ul li a:hover{
background:#0094ff;
}
ul li ul {
position: absolute;
/*绝对定位，相对于上面的用relative的元素*/
height:0;
overflow:hidden;
/*溢出时隐藏,
初始时高为0，
所以整个二级菜单都被隐藏。
*/
background: #b200ff;
color: #ffffff;
}
ul li:hover ul{
height:160px;
transition:all 2s;
/*transition属性与display属性冲突，
transition属性与height属性结合，
通过溢出隐藏，
让二级菜单随着高度变化而显示出来，
达到二级下拉菜单缓慢渐变的效果。
*/
}
#section{
background:#ff6a00;
width:100%;
height:800px;
}
视频
bilibili
腾讯视频
爱奇艺
优酷
问答
知乎
CSDN
|