纯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