HTML5仿苹果手机的面板合拢折叠效果
Release: 2016-05-17 09:07:57
Original
1737 people have browsed it
这是一个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)
- })
- })
-
-
-
复制代码
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
-
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