首頁 > web前端 > H5教程 > 主體

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

WBOY
發布: 2016-05-17 09:07:57
原創
1736 人瀏覽過
       这是一个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仿苹果手机的面板合拢折叠效果

    相關標籤:
    來源:php.cn
    上一篇:Web开发和设计上容易被忽视的8个错误 下一篇:LESS-Middleware:Node.js 和 LESS 的完美搭配
    本網站聲明
    本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
    作者最新文章
    最新問題
    相關專題
    更多>
    熱門推薦
    熱門教學
    更多>
    最新下載
    更多>
    網站特效
    網站源碼
    網站素材
    前端模板
    關於我們 免責聲明 Sitemap
    PHP中文網:公益線上PHP培訓,幫助PHP學習者快速成長!