css实现抽屉联动仿

纯 CSS 实现抽屉联动仿  点它可看原网的好吗大哥? (￢∀￢)σ :  batman-3d 网站实现其中抽屉联动效果你可以从 这里 下载源代码首先 结构 创建

• 
  
• 
  
• 
  
• 
  
• 
  
• 
  
• 
  

加上样式，样式的原理是 后一个元素 覆盖上 前一个兄弟元素 宽度的一半图片的实现效果是 sprite 技术 ／ 雪碧图.drawer{ padding: 12px; overflow-x: hidden; } .drawer ul{ position: relative; height: 100px; overflow-x: hidden; } .drawer li{ width: 220px; height: 100px; background: url("img/menu-button.jpg"); position: absolute; transition: left ease-in .6s; //取值只取过 all ?有疑惑？看到最底下去 } .drawer li:nth-child(1){ top: 0; left: 0; } .drawer li:nth-child(2){ background-position: -220px 0; top: 0; left: 130px; } .drawer li:nth-child(3){ background-position: -440px 0; top: 0; left: 260px; } .drawer li:nth-child(4){ background-position: -660px 0; top: 0; left: 390px; } .drawer li