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

妖狐艹你老母 2022-10-05 15:54 203阅读 0赞

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)

\})

\})

发表评论取消回复

表情：

评论列表（有 0 条评论，203人围观）

还没有评论，来说两句吧...

相关阅读

相关 jQuery UI 实例 - 折叠面板（Accordion）

在一个有限的空间内显示用于呈现信息的可折叠的内容面板。如需了解更多有关 accordion 部件的细节，请查看 API 文档 [折叠面板部件（Accordion Widge

﹏ヽ暗。殇╰゛Y/ 2024年03月24日 16:32/ 0 赞/ 3 阅读

相关 uniapp折叠面板

[uniaap折叠面板官网地址][uniaap]  <uni-collapse @change="change">

淡淡的烟草味﹌/ 2023年01月11日 13:06/ 0 赞/ 280 阅读

相关 Bootstrap教程(25)--折叠面板、折叠面板导航

[点此查看全部文字教程、视频教程、源代码][Link 1] 本文目录 1. 概述 2. 折叠面板 3. 折叠面板导航 4. 小结 1.

谁借莪１个温暖的怀抱￠/ 2022年11月07日 11:42/ 0 赞/ 183 阅读

相关 html5 面板折叠,HTML5仿苹果手机的面板合拢折叠效果

passbook仿苹果手机的面板合拢折叠效果-html5特效 .pocket\{ width:300px; height:460px; padding: 10px;

妖狐艹你老母/ 2022年10月05日 15:54/ 0 赞/ 204 阅读

相关 Vue 封装一个折叠面板组件

该组件使用了 Element 的一些 icon 图标，以及过渡动画 el-collapse-transition，需安装 element ![在这里插入图片描述][1d8

女爷i/ 2022年08月28日 14:51/ 0 赞/ 378 阅读

相关 MUI-折叠面板效果accordion

在做开发的过程中我们经常用到折叠面板。那我们来看下折叠面板究竟是怎么使用。废话不多说。代码粘下来： <!DOCTYPE html> <html>

小咪咪/ 2022年08月02日 09:58/ 0 赞/ 325 阅读

相关 jQuery 折叠面板

手风琴是非常常见而实用的效果，本篇文章示例一个简单的手风琴效果。上效果图： ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_

傷城~/ 2022年05月14日 15:51/ 0 赞/ 263 阅读

相关轻松实现折叠面板组件

实现的效果类似element-ui的Collapse折叠面板组件，地址[链接][Link 1]。使用效果 <collapse> <collapse-i

末蓝、/ 2021年09月20日 00:22/ 0 赞/ 390 阅读

相关 vue 实现折叠面板

效果图 ![在这里插入图片描述][20200518095018220.gif_pic_center] 思路其实说是折叠效果，关键是数据的处理， 1：第一行开头

忘是亡心i/ 2021年08月30日 01:50/ 0 赞/ 682 阅读

相关 uniapp组件-uni-collapse折叠面板

官方示例：[https://ext.dcloud.net.cn/plugin?id=23][https_ext.dcloud.net.cn_plugin_id_23] 效果

一时失言乱红尘/ 2021年07月25日 22:37/ 0 赞/ 2979 阅读