css3中的过渡（transition）实现手风琴菜单效果
css3中的过渡（transition）实现手风琴菜单效果
html:
<div class="menu"> <div class="item"> <h3>今日新闻</h3> <div class="itemBox"> <ul> <li>率先垂范 春风化雨 心连心 爱香港</li> <li>率先垂范 春风化雨 心连心 爱香港</li> <li>率先垂范 春风化雨 心连心 爱香港</li> <li>率先垂范 春风化雨 心连心 爱香港</li> </ul> </div> </div> <div class="item"> <h3>今日新闻</h3> <div class="itemBox"> <ul> <li>率先垂范 春风化雨 心连心 爱香港</li> <li>率先垂范 春风化雨 心连心 爱香港</li> <li>率先垂范 春风化雨 心连心 爱香港</li> <li>率先垂范 春风化雨 心连心 爱香港</li> </ul> </div> </div> <div class="item"> <h3>今日新闻</h3> <div class="itemBox"> <ul> <li>率先垂范 春风化雨 心连心 爱香港</li> <li>率先垂范 春风化雨 心连心 爱香港</li> <li>率先垂范 春风化雨 心连心 爱香港</li> <li>率先垂范 春风化雨 心连心 爱香港</li> </ul> </div> </div> <div class="item"> <h3>今日新闻</h3> <div class="itemBox"> <ul> <li>率先垂范 春风化雨 心连心 爱香港</li> <li>率先垂范 春风化雨 心连心 爱香港</li> <li>率先垂范 春风化雨 心连心 爱香港</li> <li>率先垂范 春风化雨 心连心 爱香港</li> </ul> </div> </div> </div>
css:
<style type="text/css">
*{
padding: 0;
margin: 0;
}
li{
list-style-type: none;
}
.menu{
width: 448px;
height: auto;
margin: 50px auto;
overflow: hidden;
}
.item{
width: 100%;
height: auto;
}
.item h3{
width: 100%;
height: 40px;
line-height: 40px;
background-color: #006699;
color: #fff;
font-weight: normal;
padding-left: 27px;
border-bottom: 2px solid green;
}
.item .itemBox{
width: 100%;
height: 0;
background-color: pink;
overflow: hidden;
/*过渡效果*/
transition-property: height;
transition-duration: 2s;
}
.item:hover .itemBox{
height: 120px;
}
.item .itemBox ul{
height: 40px;
}每个h3标签 底边使用 绿色 #5D9A00 或者 green
每个h3标签 背景使用 蓝色 #336699
transition-property: height;
[ˈprɑːpərti]
把鼠标指针移动放到 div 元素上，会产生带有平滑改变元素 宽度或高度 的过渡效果。
transition-duration: 1s;
让过渡效果持续 5 秒
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
div{
width: 100px;
height: 100px;
background-color: blue;
transition-property: height;
transition-duration: 2s;
}
div:hover{
height: 300px;
}
</style>
</head>
<body>
<div></div>
</body>
</html>
请把鼠标指针移动到蓝色的 div 元素上，就可以看到过渡效果。
注意：在 Internet Explorer 中无效。
吐槽一下
还没有留言，还不快点抢沙发？