最近学了css3的变形、过渡和动画,写了一个用css3手风琴菜单的效果,又想着用原生JavaScript来实现手风琴菜单效果。感觉挺有意思的,现在给大家分享一下。
1、css3实现手风琴效果
<style> *{ margin: 0;padding: 0;list-style: none;} .box { width: 500px; background: #1c47ff;margin: 100px auto;} .box ul li h2{ width: 500px;height: 35px;line-height: 35px; text-align: center;border: 1px solid #25fff5; } .box li:hover .txt{ height: 300px;transition: all 1s;} .txt{ overflow: hidden; height: 0;background:pink;} </style>
<div class="box"> <ul> <li> <h2>手风琴</h2> <div class="txt">内容1</div> </li> <li> <h2>手风琴</h2> <div class="txt">内容2</div> </li> <li> <h2>手风琴</h2> <div class="txt">内容3</div> </li</