今天给大家带来一款基于css3的列表toggle特效。右上角一个按钮,当列表不显示的时候,单击按钮列表动画出现,当列表显示时,单击按钮,列表动画消失,效果图如下:
实现的代码。
htm代码:
复制内容到剪贴板
- <div class='menu'>
- toggle visibility</div>
- <ul class='list reverse'>
- <li class='item'>item 1</li>
- <li class='item'>item 2</li>
- <li class='item'>item 3</li>
- <li class='item'>item 4</li>
- <li class='item'>item 5</li>
- <li class='item'>item 6</li>
- <li class='item'>item 7</li>
- <li class='item'>item 8</li>
- <li class='item'>item 9</li>
- <li class='item'>item 10</li>
- <li class='item'>item 11</li>
- <li class='item'>item 12</li>
- </ul>
css3代码:
如对本文有疑问,
点击进行留言回复!!
相关文章:
-
-
-
-
-
前端学习-过渡效果
CSS3中过渡动画1.重点是设置过渡的速度、时间、属性、延迟时间#d1{width: 100px;height:...
[阅读全文]
-
-
-
-
-
-
渡一css4
<1>行级元素(inline)feature:内容决定元素所占位置不可以通过css改变宽高<d...
[阅读全文]
网友评论