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

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

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




  1. passbook仿苹果手机的面板合拢折叠效果-html5特效
  2. .pocket{
  3. width:300px;
  4. height:460px;
  5. padding: 10px;
  6. overflow: hidden;
  7. float: left;
  8. border: 1px solid #EDEDED;
  9. margin: 4px;
  10. border-radius: 8px;
  11. box-shadow:0 -5px 30px rgba(0,0,0,0.2) inset;
  12. }
  13. .passcard {
  14. float: left;
  15. width:300px;
  16. height:380px;
  17. color: #878787;
  18. text-align: center;
  19. padding-top: 5px;
  20. margin-bottom: -320px;
  21. cursor: pointer;
  22. }
  23. .starbucks{
  24. background:url(/jscss/demoimg/201307/starbucks.png) no-repeat;
  25. }
  26. .airport{
  27. background:url(/jscss/demoimg/201307/airport.png) no-repeat;
  28. }
  29. .paper{
  30. border: 1px solid #EDEDED;
  31. color: #A8A8A8;
  32. text-align: center;
  33. font:26px 'Segoe UI Light',Helvetica,Arial,'Sans-Serif';
  34. background:-webkit-gradient(linear,left top,left bottom,color-stop(50%,rgba(229, 249, 249, 1)),color-stop(100%,rgba(240, 240, 240, 1)));
  35. background: -webkit-linear-gradient(top,rgba(249, 249, 249, 1) 50%,rgba(240, 240, 240, 1) 100%);
  36. background: -moz-linear-gradient(top,rgba(249, 249, 249, 1) 50%,rgba(240, 240, 240, 1) 100%);
  37. background: -o-linear-gradient(top,rgba(249, 249, 249, 1) 50%,rgba(240, 240, 240, 1) 100%);
  38. background: -ms-linear-gradient(top,rgba(249, 249, 249, 1) 50%,rgba(240, 240, 240, 1) 100%);
  39. background: linear-gradient(top,rgba(249, 249, 249, 1) 50%,rgba(240, 240, 240, 1) 100%);
  40. 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%);
  41. border-radius:14px;
  42. box-shadow:-2px -1px 2px rgba(0,0,0,0.1);
  43. }
  44. .pod {
  45. background: none repeat scroll 0 0 white;
  46. cursor: pointer;
  47. height: 160px;
  48. width: 300px;
  49. border: 1px solid #CDCDCD;
  50. border-radius: 6px;
  51. float: left;
  52. margin: 3px 15px 15px 3px;
  53. box-shadow: 0 0 3px rgba(0, 0, 0, 0.2),0 -4px 0 #E8E8E8 inset;
  54. }














  • 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仿苹果手机的面板合拢折叠效果

    Related labels:
    source:php.cn
    Previous article:Web开发和设计上容易被忽视的8个错误 Next article:LESS-Middleware:Node.js 和 LESS 的完美搭配
    Statement of this Website
    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
    Latest Articles by Author
    Latest Issues
    Related Topics
    More>
    Popular Recommendations
    Popular Tutorials
    More>
    Latest Downloads
    More>
    Web Effects
    Website Source Code
    Website Materials
    Front End Template