纯css手风琴accordion菜单炫酷切换查看特效

css代码实现切换#wrap { width: 1182px; height: 280px; border: 6px solid #fff; margin: 80px auto; background: #ef4300; overflow: hidden;} #wrap ul { width: 3182px; } #wrap ul li { width: 196px; height: 280px; float: left; list-style: none; border-left: 1px solid #ddd; box-shadow: 0px 0px 20px 5px rgba(0,0,0,0.4); transition: all 1s; position: relative; /*参照物*/ } #wrap ul li:nth-child(1) { background: #00A0EA; } #wrap ul li:nth-child(2) { background: #65A2BF; } #wrap ul li:nth-child(3) { background: #957171; } #wrap ul li:nth-child(4) { background: #EF92C7; } #wrap ul li:nth-child(5) { background: #378048; } #wrap ul li:nth-child(6) { background: #ef4300; } #wrap ul:hover li { width: 40px; } #wrap ul li:hover { width: 980px; }.course { position: absolute; top: 45px; left: 20px; width: 980px;} .course dl { float: left; width: 210px; height: 190px; border: 1px solid #fff; margin: 0px 10px; box-shadow: 0px 0px 5px #ccc; text-align: center; } .course dl dt { padding: 5px; height: 150px; } .course dl dd { font-weight: bold; background: rgba(0,0,0,0.5); line-height: 30px; }#wrap ul li p { width: 196px; height: 280px; background: rgba(0,0,0,0.5); position: absolute; line-height: 280px; font-weight: bold; text-align: center; transition: all 1s;}#wrap ul li .titel1 { top: 0px; left: 0px;}#wrap ul li .titel2 { bottom: 0px; left: 0px;}#wrap ul li:hover p { width: 980px; height: 40px; line-height: 40px;}

在线演示        积分下载        6毛下载        砍两刀下载