HTML5仿苹果手机的面板合拢折叠效果

这是一个HTML5折叠菜单，但更像是一个折叠面板，仿苹果手机的passbook应用中的代码例子，请在火狐或chrome下浏览。不知道有没有听说过手机琴菜单，觉得这一个从形式上来说，是挺像的。

1. 
   
2. 
   
3. 
   
4. 
   
5. 
   
7. .pocket{
   
8. width:300px;
   
9. height:460px;
   
10. padding: 10px;
    
11. overflow: hidden;
    
12. float: left;
    
13. border: 1px solid #EDEDED;
    
14. margin: 4px;
    
15. border-radius: 8px;
    
16. box-shadow:0 -5px 30px rgba(0,0,0,0.2) inset;
    
17. }
    
18. .passcard {
    
19. float: left;
    
20. width:300px;
    
21. height:380px;
    
22. color: #878787;
    
23. text-align: center;
    
24. padding-top: 5px;
    
25. margin-bottom: -320px;
    
26. cursor: pointer;
    
27. }
    
28. .starbucks{
    
29. background:url(/jscss/demoimg/201307/starbucks.png) no-repeat;
    
30. }
    
31. .airport{
    
32. background:url(/jscss/demoimg/201307/airport.png) no-repeat;
    
33. }
    
34. .paper{
    
35. border: 1px solid #EDEDED;
    
36. color: #A8A8A8;
    
37. text-align: center;
    
38. font:26px 'Segoe UI Light',Helvetica,Arial,'Sans-Serif';
    
39. background:-webkit-gradient(linear,left top,left bottom,color-stop(50%,rgba(229, 249, 249, 1)),color-stop(100%,rgba(240, 240, 240, 1)));
    
40. background: -webkit-linear-gradient(top,rgba(249, 249, 249, 1) 50%,rgba(240, 240, 240, 1) 100%);
    
41. background: -moz-linear-gradient(top,rgba(249, 249, 249, 1) 50%,rgba(240, 240, 240, 1) 100%);
    
42. background: -o-linear-gradient(top,rgba(249, 249, 249, 1) 50%,rgba(240, 240, 240, 1) 100%);
    
43. background: -ms-linear-gradient(top,rgba(249, 249, 249, 1) 50%,rgba(240, 240, 240, 1) 100%);
    
44. background: linear-gradient(top,rgba(249, 249, 249, 1) 50%,rgba(240, 240, 240, 1) 100%);
    
45. background: -webkit-linear-gradient(top,rgba(255, 255, 255, 0.05) 0%,rgba(255, 255, 255, 0.05) 20%,rgba(0, 0, 0, 0.05) 100%);
    
46. border-radius:14px;
    
47. box-shadow:-2px -1px 2px rgba(0,0,0,0.1);
    
48. }
    
49. .pod {
    
50. background: none repeat scroll 0 0 white;
    
51. cursor: pointer;
    
52. height: 160px;
    
53. width: 300px;
    
54. border: 1px solid #CDCDCD;
    
55. border-radius: 6px;
    
56. float: left;
    
57. margin: 3px 15px 15px 3px;
    
58. box-shadow: 0 0 3px rgba(0, 0, 0, 0.2),0 -4px 0 #E8E8E8 inset;
    
59. }
    
60. 
    
61. 
    
62. 
    
63. 
    
64. 
    
65. 
    
66. 
    

passcard 1

passcard 2

passcard 3