HTML5仿苹果手机的面板合拢折叠效果
풀어 주다: 2016-05-17 09:07:57
这是一个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)
- })
- })
-
-
-
复制代码
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
저자별 최신 기사
-
2024-10-22 09:46:29
-
2024-10-13 13:53:41
-
2024-10-12 12:15:51
-
2024-10-11 22:47:31
-
2024-10-11 19:36:51
-
2024-10-11 15:50:41
-
2024-10-11 15:07:41
-
2024-10-11 14:21:21
-
2024-10-11 12:59:11
-
2024-10-11 12:17:31