css层叠卡片滑出特效
Steps to Frontend Success
A life well lived.
Step 1
Write some markup.
Step 2
Write some css.
Step 3
Look up stuff on MDN.
Step 4
Switch Pre-Processors. Because things are starting to get complicated.
Step 5
Thow out your work start over,becasuse this time you definately choose the right framework.
Step 6
Break down and cry.
Step 7
Curl up in fetal position.
Step 8
Write more CSS to cover up your already bad 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>本文内容仅供个人学习/研究/参考使用，不构成任何决策建议或专业指导。分享/转载时请标明原文来源，同时请勿将内容用于商业售卖、虚假宣传等非学习用途哦～感谢您的理解与支持！