HTML5仿苹果手机的面板合拢折叠效果
php中文网
发布时间：2016-05-17 09:07:57
|
2049人浏览过
|
来源于php中文网
原创
这是一个HTML5折叠菜单，但更像是一个折叠面板，仿苹果手机的passbook应用中的代码例子，请在火狐或chrome下浏览。不知道有没有听说过手机琴菜单，觉得这一个从形式上来说，是挺像的。
-
-
passbook仿苹果手机的面板合拢折叠效果-html5特效
- .pocket{
- width:300px;
- height:460px;
- padding: 10px;
- overflow: hidden;
- float: left;
- border: 1px solid #EDEDED;
- margin: 4px;
- border-radius: 8px;
- box-shadow:0 -5px 30px rgba(0,0,0,0.2) inset;
- }
- .passcard {
- float: left;
- width:300px;
- height:380px;
- color: #878787;
- text-align: center;
- padding-top: 5px;
- margin-bottom: -320px;
- cursor: pointer;
- }
- .starbucks{
- background:url(/jscss/demoimg/201307/starbucks.png) no-repeat;
- }
- .airport{
- background:url(/jscss/demoimg/201307/airport.png) no-repeat;
- }
- .paper{
- border: 1px solid #EDEDED;
- color: #A8A8A8;
- text-align: center;
- font:26px 'Segoe UI Light',Helvetica,Arial,'Sans-Serif';
- background:-webkit-gradient(linear,left top,left bottom,color-stop(50%,rgba(229, 249, 249, 1)),color-stop(100%,rgba(240, 240, 240, 1)));
- background: -webkit-linear-gradient(top,rgba(249, 249, 249, 1) 50%,rgba(240, 240, 240, 1) 100%);
- background: -moz-linear-gradient(top,rgba(249, 249, 249, 1) 50%,rgba(240, 240, 240, 1) 100%);
- background: -o-linear-gradient(top,rgba(249, 249, 249, 1) 50%,rgba(240, 240, 240, 1) 100%);
- background: -ms-linear-gradient(top,rgba(249, 249, 249, 1) 50%,rgba(240, 240, 240, 1) 100%);
- background: linear-gradient(top,rgba(249, 249, 249, 1) 50%,rgba(240, 240, 240, 1) 100%);
- 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%);
- border-radius:14px;
- box-shadow:-2px -1px 2px rgba(0,0,0,0.1);
- }
- .pod {
- background: none repeat scroll 0 0 white;
- cursor: pointer;
- height: 160px;
- width: 300px;
- border: 1px solid #CDCDCD;
- border-radius: 6px;
- float: left;
- margin: 3px 15px 15px 3px;
- box-shadow: 0 0 3px rgba(0, 0, 0, 0.2),0 -4px 0 #E8E8E8 inset;
- }
-
-
-
-
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)
- })
- })
-
数码产品性能查询
该软件包括了市面上所有手机CPU，手机跑分情况，电脑CPU，电脑产品信息等等，方便需要大家查阅数码产品最新情况，了解产品特性，能够进行对比选择最具性价比的商品。
下载
本站声明：本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn
