简体中文（ZH-CN）English（EN）繁体中文（ZH-TW）日本語（JA）한국어（KO）
Home
Article
Q&A
Course
Topic
Download
Game
Dictionary

Home  >  Article  >  Web Front-end  >  HTML5仿苹果手机的面板合拢折叠效果

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

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




  5. passbook仿苹果手机的面板合拢折叠效果-html5特效
  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. }














  • passcard 1

  • passcard 2

  • passcard 3




  • $(function(){
  • $('.passcard').hover(function(){
  • $(this).stop(false,false).animate({'margin-bottom':'-100px'},400)
  • },function(){
  • $(this).stop(false,false).animate({'margin-bottom':'-320px'},400)
  • })
  • })


    • 复制代码

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

    Statement：
    The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
    Previous article：Web开发和设计上容易被忽视的8个错误Next article：LESS-Middleware：Node.js 和 LESS 的完美搭配

    Related articles

    See more