纯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">
                            <div class="content-inner">
                                <div class="title">美味的端午节粽子和香茶矢量素材</div>
                                <div class="text">这是一款美味的端午节粽