css层叠卡片滑出特效

源码

<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="radio">
	<div card>
		<div class="content">
			<h2>Step 1</h2>
			<p>Write some markup.</p><label for="card-2">Go to 2</label>
		</div>
	</div><input id="card-2" name="card-set" type="radio">
	<div card>
		<div class="content">
			<h2>Step 2</h2>
			<p>Write some CSS.</p><label for="card-3">Go to 3</label>
		</div>
	</div><input id="card-3" name="card-set" type="radio">
	<div card>
		<div class="content">
			<h2>Step 3</h2>
			<p>Look up stuff on MDN.</p><label for="card-4">Go to 4</label>
		</div>
	</div><input id="card-4" name="card-set" type="radio">
	<div card>
		<div class="content">
			<h2>Step 4</h2>
			<p>Switch Pre-Processors. Because things are starting to get complicated.</p><label for="card-5">Go to 5</label>
		</div>
	</div><input id="card-5" name="card-set" type="radio">
	<div card>
		<div class="content">
			<h2>Step 5</h2>
			<p>Thow out your work start over,becasuse this time you definately choose the right framework.</p><label for="card-6">Go to 6</label>
		</div>
	</div><input id="card-6" name="card-set" type="radio">
	<div card>
		<div class="content">
			<h2>Step 6</h2>
			<p>Break down and cry.</p><label for="card-7">Go to 7</label>
		</div>
	</div><input id="card-7" name="card-set" type="radio">
	<div card>
		<div class="content">
			<h2>Step 7</h2>
			<p>Curl up in fetal position.</p><label for="card-8">Go to 8</label>
		</div>
	</div><input id="card-8" name="card-set" type="radio">
	<div card>
		<div class="content">
			<h2>Step 8</h2>
			<p>Write more CSS to cover up your already bad CSS.</p><label for="card-0">Start Over</label>
		</div>
	</div>
</div>

<style>
	body {
		background: #248c46
	}
	[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
	}
</style>

链接: https://fly63.com/course/33_1601