純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);
}