纯CSS实现的卡片切换效果

最新推荐文章于 2025-09-26 17:50:09 发布

原创

最新推荐文章于 2025-09-26 17:50:09 发布 · 1.9k 阅读

3 ·

CC 4.0 BY-SA版权

文章标签：

#css #前端

本文介绍了如何仅使用CSS创建卡片切换效果，适用于静态页面产品展示。通过利用CSS的`:checked`属性与`input[type=radio]`的关联，实现单选控件触发兄弟元素的隐藏和显示，从而达到卡片切换的目的。同时提到了使用一行CSS实现主题皮肤切换的方法。

纯CSS实现的卡片切换效果

无需JS就可以实现
限于纯静态页面产品展示
不需要轮播,自动切换

示例代码

<template>
        <div class="example-css-tab">
           <div class="container dwo">
                <div class="card">
                    <input type="radio" name="select" id="slide_1" checked>
                    <input type="radio" name="select" id="slide_2">
                    <input type="radio" name="select" id="slide_3">
                    <input type="checkbox" id="slideImg">
                    <div class="slider">
                        <label for="slide_1" class="slide slide_1"></label>
                        <label for="slide_2" class="slide slide_2"></label>
                        <label for="slide_3" class="slide slide_3"></label>
                    </div>
                    <div class="inner_part">
                        <label for="slideImg" class="img">
                            <img class="img_1" src="https://img1.dowebok.com/5160.png">
                        </label>
                        <div class="content content_1">