css3手风琴

                CSS3手风琴

开发工具与关键技术：Adobe Dreamweaver Css3旋转与位移
css3手风琴
html代码：

css代码： * {padding: 0px;margin:0px;}.rn{width:1200px;height: 280px;position: fixed;left: 400px;}.rn a{float: left;text-decoration:none;display: block;width: 60px;height: 280px;margin-left:3px;background:#c6314e;transform:translateY(-220px);transition: all 0.2s ease;}.rn a em {display: inline-block;width: 60px;height: 220px; background: #39a4dc; text-align: center; margin-right: 10px;}.rn:hover a{transform: translateX(0px);}.rn a:nth-of-type(1){transition-delay:0.05s;}.rn a:nth-of-type(2){transition-delay:0.1s;}.rn a:nth-of-type(3){transition-delay:0.15s;}.rn a:nth-of-type(4){transition-delay:0.2s;}.rn a:nth-of-type(5){transition-delay:0.25s;}.rn a:nth-of-type(6){transition-delay:0.3s;}.rn a:nth-of-type(7){transition-delay:0.35s;}.rn a:nth-of-type(8){transition-delay:0.4s;}.rn a:nth-of-type(9){transition-delay:0.45s;}.rn a:nth-of-type(10){transition-delay:0.5s;}.rn a:nth-of-type(11){transition-delay:0.55s;}.rn a:nth-of-type(12){transition-delay:0.6s; }.rn a:nth-of-type(13){transition-delay:0.65s;}.rn a:nth-of-type(14){transition-delay:0.7s;}