css实现折叠式结算单据效果代码-html代码-BFW代码库

css实现折叠式结算单据效果代码

代码语言：html

代码描述：css实现折叠式结算单据效果代码

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <style>
        html {
    	box-sizing:border-box;
    }
    *,*:before,*:after {
    	box-sizing:inherit;
    }
    body {
    	margin:40px;
    	background:#f4f4f4;
    }
    .receipt {
    	width:400px;
    	max-width:100%;
    	margin:auto;
    	position:relative;
    }
    .receipt__half {
    	display:flex;
    	flex-direction:column;
    	justify-content:center;
    	align-items:center;
    	width:100%;
    	position:relative;
    	background:white;
    	-webkit-perspective:1000px;
    	perspective:1000px;
    }
    .receipt__half::after {
    	content:'';
    	display:block;
    	width:100%;
    	height:100px;
    	position:absolute;
    	left:0;
    	-webkit-backface-visibility:hidden;
    	backface-visibility:hidden;
    	transition:all 0.8s ease;
    	transition-delay:0.35s;
    }
    .active .receipt__half::after {
    	transition-delay:0s;
    }
    .upper {
    	padding:20px;
    	z-index:10;
    }
    .upper::after {
    	top:100%;
    	background:#f7f7f7;
    	border-top:1px dashed #dedede;
    	-webkit-transform:rotate3d(1,0,0,-90deg);
    	transform:rotate3d(1,0,0,-90deg);
    	-webkit-transform-origin:top center;
    	transform-origin:top center;
    }
    .active .upper::after {
    	background:white;
    	-webkit-transform:rotate3d(1,0,0,0deg);
    	transform:rotate3d(1,0,0,0deg);
    }
    .lower {
    	transition:-webkit-transform 0.8s ease;
    	transition:transform 0.8s ease;
    	transition:transform 0.8s ease,-webkit-transform 0.8s ease;
    	transition-delay:0.35s;
    }
    .lower::after {
    	bottom:100%;
    	background:#ebebeb;
    	-webkit-transform:rotate3d(1,0,0,90deg);
    	transform:rotate3d(1,0,0,90deg);
    	-webkit-transform-origin:bottom center;
    	transform-origin:bottom center;
    }
    .active .lower {
    	border-top:none;
    	-webkit-transform:translateY(200px);
    	transform:translateY(200px);
    	transition-delay:0s;
    }
    .active .lower::after {
    	background:white;
    	-webkit-transform:rotate3d(1,0,0,0deg);
    	transform:rotate3d(1,0,0,0deg);
    }
    h1 {
    	margin:10px 0 20px;
    }
    h1.page-title {
    	text-align:center;
    	margin-bottom:60px;
    }
    p {
    	margin:0;
    }
    p.sm {
    	font-size:80%;
    }
    button {
    	width:100%;
    	padding:15px 20px;
    	background:none;
    	outline:none;
    	border:none;
    	border-top:1px dashed #dedede;
    	color:#888;
   .........完整代码请登录后点击上方下载按钮下载查看