如何将卡片悬停垂直开合动画修改为移动端适配的水平左右开合效果

实现效果说明 #

修改后可实现：奇数卡片（第1、3、5个）hover时向左水平开合，偶数卡片（第2、4个）hover时向右水平开合，同时适配移动端竖排布局。

参考效果图 #

核心修改点 #

1. 卡片容器设置固定宽高，两个功能层（face1/face2）改为绝对定位重叠排布，取消原有垂直方向位移逻辑
2. 使用:nth-child(odd)/:nth-child(even)选择器分别给奇偶卡片设置相反的水平位移初始值与hover动画
3. 新增移动端媒体查询，小屏下卡片自动转为竖排，适配手机视图

完整修改后CSS代码 #

.container-five-steps{
    position: relative;
    display: flex;
    gap: 20px;
    flex-wrap: wrap;
    justify-content: center;
    padding-top: 10px;
    padding-bottom: 10px;
}

.container-five-steps .card-five-steps{
    position: relative;
    cursor: pointer;
    width: 235px;
    height: 280px;
    overflow: hidden;
}

.container-five-steps .card-five-steps .face{
    width: 100%;
    height: 100%;
    transition: 0.5s;
    position: absolute;
    top: 0;
    left: 0;
}

/* 奇数卡片样式：向左展开 */
.container-five-steps .card-five-steps:nth-child(odd) .face.face1{
    background: #009297;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1;
    transform: translateX(0);
}
.container-five-steps .card-five-steps:nth-child(odd):hover .face.face1{
    background: #009297;
    transform: translateX(100%);
    box-shadow: inset 10px 10px 99px #00000029;
}
.container-five-steps .card-five-steps:nth-child(odd) .face.face2{
    background: #fff;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 20px;
    box-sizing: border-box;
    box-shadow: 0 0 40px rgb(17 125 128);
    transform: translateX(-100%);
}
.container-five-steps .card-five-steps:nth-child(odd):hover .face.face2{
    transform: translateX(0);
}

/* 偶数卡片样式：向右展开 */
.container-five-steps .card-five-steps:nth-child(even) .face.face1{
    background: #009297;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1;
    transform: translateX(0);
}
.container-five-steps .card-five-steps:nth-child(even):hover .face.face1{
    background: #009297;
    transform: translateX(-100%);
    box-shadow: inset 10px 10px 99px #00000029;
}
.container-five-steps .card-five-steps:nth-child(even) .face.face2{
    background: #fff;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 20px;
    box-sizing: border-box;
    box-shadow: 0 0 40px rgb(17 125 128);
    transform: translateX(100%);
}
.container-five-steps .card-five-steps:nth-child(even):hover .face.face2{
    transform: translateX(0);
}

/* 公共内容样式 */
.container-five-steps .card-five-steps .face.face1 .content{
    transition: 0.5s;
}

.container-five-steps .card-five-steps:hover .face.face1 .content{
    opacity: 1;
}

.container-five-steps .card-five-steps .face.face1 .content img{
    max-width: 50px;
}

.container-five-steps .card-five-steps .face.face1 .content h4{
    margin: 10px 0 0;
    padding: 0;
    color: #fff;
    text-align: left;
    font-size: 20px;
    font-weight:100;
}

.bg-color-five-step h3{
    color: #fff;
    text-align: left;
    font-size: 34px;
    font-weight:500;
}

.five-step-icon{
    position: absolute;
    right: -6%;
    top: 40%;
    z-index: 10;
}
/* 奇数卡片的箭头调整到左侧，不需要可删除 */
.container-five-steps .card-five-steps:nth-child(odd) .five-step-icon{
    left: -6%;
    right: auto;
}

.container-five-steps .card-five-steps .face.face2 .content p{
    margin: 0;
    padding: 0;
    color: #009297;
    line-height: 20px;
    text-align: left;
    font-size: 13px;
}

.container-five-steps .card-five-steps .face.face2 .content a{
    margin: 15px 0 0;
    display:  inline-block;
    text-decoration: none;
    font-weight: 400;
    color: #000000;
    padding: 5px;
    background-color: #FFDB72;
    float: right;
    border-radius: 20px;
    font-size: 9px;
}

.container-five-steps .card-five-steps .face.face2 .content a:hover{
    background: #333;
    color: #fff;
}

/* 移动端适配 */
@media (max-width: 768px) {
    .container-five-steps{
        flex-direction: column;
        align-items: center;
    }
    .container-five-steps .card-five-steps{
        width: 90%;
        max-width: 350px;
    }
}

使用说明 #

原有HTML代码无需修改，直接替换CSS即可生效。如果不需要箭头位置自动调整，删除对应.five-step-icon的奇偶样式即可。

内容的提问来源于stack exchange，提问作者SandyS