纯CSS如何实现移动堆叠卡片行

1 必要CSS基础

1.1 CSS伪类

:not()：匹配不符合选择器的元素

:first-child：选择一组兄弟元素中的第一个子元素

:last-child选择一组兄弟元素中的最后一个子元素

:hover：鼠标悬浮在元素上方

:focus-within：匹配元素自身或者其某个后代匹配:focus伪类

1.2 CSS属性

transform：对当前元素进行旋转、平移、倾斜及缩放操作，具体请自行查看文档。

transition：为当前元素在不同状态之间切换设置过渡效果，具体请自行查看文档。

translateY：页面垂直移动元素，具体请自行查看文档。

translateX：页面水平移动元素，具体请自行查看文档。

1.3 CSS选择器

~：兄弟选择符，位置无需相邻，同级即可，例如：A~B表示选择A元素后所有同级B元素

2 实现代码

2.1 卡片行HTML实现

<div class="cards">
    <div class="card">
        <h2><a href="#">标题一</a></h2>
        <p>当前显示为卡片一描述文字。</p>
    </div>
    <div class="card">
        <h2><a href="#">标题二</a></h2>
        <p>当前显示为卡片二描述文字。</p>
    </div>
    <div class="card">
        <h2><a href="#">标题三</a></h2>
        <p>当前显示为卡片三描述文字。</p>
    </div>
    <div class="card">
        <h2><a href="#">标题四</a></h2>
        <p>当前显示为卡片四描述文字。</p>
    </div>
    <div class="card">
        <h2><a href="#">标题五</a></h2>
        <p>当前显示为卡片五描述文字。</p>
    </div>
</div>

2.2 卡片基础样式

.wrap{
	display: flex;
	background: #efefef;
	align-items: center;
	height: 100%;
	padding: 100px;
}
.cards{
	display: flex;
}
.card{
	background: #fff;
	box-shadow: 2px 3px 10px 2px rgba(62,81,232,0.6);
	border-radius: 8px;
	transition: ease-in-out .28s;
	padding: 15px;
}
.card h2{
	padding-bottom: 16px;
}
.card a{
	font-size: 18px;
	color: rgba(62,81,232,1);
	text-decoration: none;
	
}
.card p{
	font-size: 16px;
	line-height: 22px;
	color: rgba(62,81,232,0.6);
}

2.3 卡片移动样式

.card:not(:first-child){
	margin-left: -40px;
}
.card:not(:last-child):hover,
.card:not(:first-child):focus-within{
	transform: translateY(-20px);
}
.card:not(:last-child):hover ~ .card,
.card:not(:first-child):focus-within ~ .card{
	transform: translateX(40px);
}