今天给大家带来一款基于css3的列表toggle特效。右上角一个按钮，当列表不显示的时候，单击按钮列表动画出现，当列表显示时，单击按钮，列表动画消失，效果图如下：

实现的代码。

htm代码：

复制内容到剪贴板 <divclass='menu'> togglevisibility</div> <ulclass='listreverse'> <liclass='item'>Item1</li> <liclass='item'>Item2</li> <liclass='item'>Item3</li> <liclass='item'>Item4</li> <liclass='item'>Item5</li> <liclass='item'>Item6</li> <liclass='item'>Item7</li> <liclass='item'>Item8</li> <liclass='item'>Item9</li> <liclass='item'>Item10</li> <liclass='item'>Item11</li> <liclass='item'>Item12</li> </ul>

css3代码：

CSS Code复制内容到剪贴板 *{ -moz-box-sizing:border-box; box-sizing:border-box; } body{ margin:0; padding:0; font-family:'AvenirNext'; background:#000; color:white; } .menu{ background:tomato; padding:20px; position:absolute; z-index:1; height:55px; top:0; rightright:50px; } .list{ -webkit-perspective:100vw; perspective:100vw; width:100vw; height:100vh; display:-webkit-flex; display:-ms-flexbox; display:flex; -webkit-flex-flow:columnwrap; -ms-flex-flow:columnwrap; flex-flow:columnwrap; } .list.hidden{ pointer-events:none; } .list.hidden.item{ -webkit-animation:disappearboth; animation:disappearboth; -webkit-animation-direction:alternate; animation-direction:alternate; } .list.reverse{ -webkit-flex-flow:row-reversewrap-reverse; -ms-flex-flow:row-reversewrap-reverse; flex-flow:row-reversewrap-reverse; } .item{ font-size:30px; padding:20px; height:100px; width:calc(100vw/3); height:calc(100vh/4); -webkit-animation:appearboth; animation:appearboth; } .item:nth-child(1){ background:#008a8a; -webkit-animation-delay:0.03333s!important; -webkit-animation-duration:0.1s!important; } .item:nth-child(2){ background:#009494; -webkit-animation-delay:0.06667s!important; -webkit-animation-duration:0.2s!important; } .item:nth-child(3){ background:#009f9f; -webkit-animation-delay:0.1s!important; -webkit-animation-duration:0.3s!important; } .item:nth-child(4){ background:#00a9a9; -webkit-animation-delay:0.13333s!important; -webkit-animation-duration:0.4s!important; } .item:nth-child(5){ background:#00b3b3; -webkit-animation-delay:0.16667s!important; -webkit-animation-duration:0.5s!important; } .item:nth-child(6){ background:#00bdbd; -webkit-animation-delay:0.2s!important; -webkit-animation-duration:0.6s!important; } .item:nth-child(7){ background:#00c7c7; -webkit-animation-delay:0.23333s!important; -webkit-animation-duration:0.7s!important; } .item:nth-child(8){ background:#00d2d2; -webkit-animation-delay:0.26667s!important; -webkit-animation-duration:0.8s!important; } .item:nth-child(9){ background:#00dcdc; -webkit-animation-delay:0.3s!important; -webkit-animation-duration:0.9s!important; } .item:nth-child(10){ background:#00e6e6; -webkit-animation-delay:0.33333s!important; -webkit-animation-duration:1s!important; } .item:nth-child(11){ background:#00f0f0; -webkit-animation-delay:0.36667s!important; -webkit-animation-duration:1.1s!important; } .item:nth-child(12){ background:#00fafa; -webkit-animation-delay:0.4s!important; -webkit-animation-duration:1.2s!important; } @-webkit-keyframesappear{ from{ opacity:0; -webkit-transform:scale(0.8); transform:scale(0.8); } to{ opacity:1; -webkit-transform:scale(1); transform:scale(1); } } @keyframesappear{ from{ opacity:0; -webkit-transform:scale(0.8); transform:scale(0.8); } to{ opacity:1; -webkit-transform:scale(1); transform:scale(1); } } @-webkit-keyframesdisappear{ from{ opacity:1; -webkit-transform:scale(1); transform:scale(1); } to{ opacity:0; -webkit-transform:scale(0.9)rotateX(0deg)translateZ(-1500px); transform:scale(0.9)rotateX(0deg)translateZ(-1500px); } } @keyframesdisappear{ from{ opacity:1; -webkit-transform:scale(1); transform:scale(1); } to{ opacity:0; -webkit-transform:scale(0.9)rotateX(0deg)translateZ(-1500px); transform:scale(0.9)rotateX(0deg)translateZ(-1500px); } }