css实现层叠卡片滑出动画更换效果代码-html代码-BFW代码库

css实现层叠卡片滑出动画更换效果代码

代码语言：html

代码描述：css实现层叠卡片滑出动画更换效果代码，点击按钮试试效果。

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

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

<head>
    <meta charset="UTF-8">
<style>
[card-stack] {
	will-change:transform;
	position:relative;
	width:20rem;
	margin-left:auto;
	margin-right:auto;
	margin-top:1rem
}
[name=card-set] {
	display:none
}
[name=card-set]:checked+[card] {
	display:flex;
	opacity:1;
	filter:blur(0);
	transform:translateY(0) scale(1);
	transition:transform 1s,opacity 1s,filter .25s;
	transition-delay:.3s;
	z-index:0
}
[name=card-set]:checked+[card] ~ [card] {
	z-index:-1;
	display:flex;
	opacity:.9;
	filter:blur(1px);
	transform:translateY(1.2rem) scale(0.95);
	transition:transform 1.5s,opacity 1.5s,filter .5s;
	transition-delay:.4s
}
[name=card-set]:checked+[card] ~ [card] ~ [card] {
	z-index:-2;
	display:flex;
	opacity:.7;
	filter:blur(2px);
	transform:translateY(2.4rem) scale(0.9);
	transition:transform 2s,opacity 2s,filter 1.5s;
	transition-delay:.5s
}
[name=card-set]:checked+[card] ~ [card] ~ [card] ~ [card] {
	z-index:-3;
	display:flex;
	opacity:.5;
	filter:blur(3px);
	transform:translateY(3.6rem) scale(0.85);
	transition:transform 2.5s,opacity 2.5s,filter 2s;
	transition-delay:.7s
}
[name=card-set]:checked+[card] ~ [card] ~ [card] ~ [card] ~ [card] {
	z-index:-4;
	display:flex;
	opacity:0;
	filter:blur(4px);
	transform:translateY(5rem) scale(0.8);
	transition:transform 3s,opacity 3s,filter 2.5s;
	transition-delay:.8s
}
[card] {
	display:flex;
	will-change:filter opacity transform;
	position:absolute;
	top:0;
	width:100%;
	background-color:white;
	opacity:0;
	transform:translateY(0) translateX(calc(-100% - 1rem)) scale(1);
	transition:transform .5s,opacity .2s .3s,filter .1s;
	transition-timing-function:ease-in;
	box-shadow:0 .2rem 0 rgba(0,0,0,0.2);
	border-radius:5px;
	justify-content:center;
	align-items:center;
	z-index:1;
	min-height:50vh
}
[card]::before {
	content:"";
	display:block;
	padding-bottom:130%
}
[card] .content {
	display:flex;
	flex-direction:column;
	align-items:center;
	justify-content:space-around;
	padding:2rem;
	text-align:center
}
[card] label {
	color:white;
	display:inline-block;
	padding:1rem 2rem;
	margin:1rem;
	background-color:#47cf73;
	border-radius:200px;
	-webkit-user-select:none;
	-moz-user-select:none;
	-ms-user-select:none;
	user-select:none
}
[card] label:hover {
	background-color:#6fda92
}
[card] label:active {
	background-color:#248c46
}
body {
	background:#248c46
}

</style>
</head>

<body>

    <div card-stack><input id="card-0" name="card-set" type="radio" checked/>
        <div card>
            <div class="content">
                <h2>Steps to Frontend Success</h2>
                <p>A life well lived.</p><label for="card-1">Learn More</label></div>
        </div><input id="card-1" name="card-set" type=&q.........完整代码请登录后点击上方下载按钮下载查看