[分享]css中 卡片切换效果图

在前端开发中，常常需要实现页面中卡片切换效果图。这种效果图像是一张纸牌一样的卡片，可以通过鼠标点击或滑动手势进行切换。实现该效果图一般使用CSS3技术。CSS3提供了一些新特性，比如过渡(transi...

在前端开发中，常常需要实现页面中卡片切换效果图。这种效果图像是一张纸牌一样的卡片，可以通过鼠标点击或滑动手势进行切换。实现该效果图一般使用CSS3技术。

CSS3提供了一些新特性，比如过渡(transition)和动画(animation)。这些特性可以轻松实现卡片切换效果图。

.card {
    position: relative;
    width: 100%;
    height: 400px;
    border-radius: 10px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.card:hover {
    transform: scale(1.05);
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.5);
} 

上述代码中，.card是表示卡片的类名，transition属性设置所有属性变化执行的时间，cubic-bezier属性表示变化的速度曲线，hover伪类表示鼠标悬停时的效果。使用transform属性实现缩放效果，box-shadow属性实现阴影效果。

实现卡片切换效果图时，需要将多个卡片平铺在同一区域，并且只显示当前卡片。可以使用CSS3中的position属性实现。每个卡片需要设置绝对定位，并通过left和top属性控制位置。

.container {
    position: relative;
    width: ***px;
    height: 400px;
    margin: 0 auto;
    overflow: hidden;
}

.card {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.card.active {
    opacity: 1;
} 

上述代码中，.container是表示卡片容器的类名，设置容器的宽和高，以及溢出隐藏。.card类中设置opacity属性为0，表示初始状态下卡片不可见。.card.active类表示当前激活状态的卡片，通过设置opacity为1，实现卡片的渐变切换效果。

在页面中使用JavaScript代码将卡片的激活状态进行切换。一般通过点击或滑动手势来触发JavaScript代码。比如下面的示例代码中通过点击按钮实现：

var cards = document.querySelectorAll('.card');
var buttons = document.querySelectorAll('button');

for (var i = 0; i < buttons.length; i++) {
    buttons[i].addEventListener('click', function() {
        for (var j = 0; j < cards.length; j++) {
            cards[j].classList.remove('active');
        }
        var target = this.getAttribute('data-target');
        document.querySelector(target).classList.add('active');
    });
} 

上述代码中，首先通过querySelectorAll方法获取所有卡片和按钮，然后通过addEventListener方法对按钮进行监听。当按钮被点击时，移除所有卡片的.active类，然后根据按钮的data-target属性获取目标卡片的选择器，最后为目标卡片添加.active类，实现卡片切换。

综上所述，通过CSS3实现卡片切换效果图是一项很有价值的技能，同时也是前端开发中常见的任务。以上示例代码供大家参考。