纯CSS实现循环翻牌效果

先看效果

点击卡片就能切换一张，并且整个实现过程并没有用到js。这个样例中除了两张卡片外其实还有两个透明的input，你点击到的其实是这俩input，而且这俩input会在点击后修改自身的z-index属性，保证你下次点击必定会点击到另外一个。

z-index

我们对元素使用定位(posation:absolute,fixed,relative)后，元素之间可能会发生重叠，除了html结构中后来居上的原则外，我们还能使用z-index来控制元素的覆盖关系，z-index的值越大，元素越处于顶层。

下面是一个简短的案例：我们试试点击这两个巨型单选

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17


<div>
    <input name="demo1" 
        style="width:100px;height:100px;position:relative"
        type="radio">
    <input checked
        name="demo1"
        style="width:100px;height:100px;position:relative;right:50px"
        type="radio">
</div>
<style>
    [name="demo1"]{
        z-index: 1;//没被选择的单选框z-index为1
    }
    [name="demo1"]:checked{//被选择的单选框z-index为2
        z-index: 2;
    }
</style>

被赋予z-index:2的元素会覆盖于z-index:1的元素之上。如果我们将这两个单选框完全重合，然后赋予被选中的单选框较低的z-index,我们就能保证每次被点击的都是未被选中的那个，这就是这个翻牌案例的核心逻辑。

开干吧

以下是翻牌案例的全部代码：

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45


<div class="box">
    <!-- 两个input需要放置在卡片之前但是覆盖在卡片之上，我们使用z-index来实现 -->
    <input class="radio1" type="radio" name="card"/>
    <input class="radio2" type="radio" name="card"/>
    <!-- 两张卡片 -->
    <div style="background:#F1948A" class="card1"></div>
    <div style="background:#AED6F1" class="card2"></div>
</div>
<style>
    [class*="card"]{//为卡片设置初始样式
        width: 200px;
        height: 300px;
        position: absolute;
        border-radius: 16px;
        box-shadow: 0 0 10px rgba(0,0,0,0.2);
        transition: all 1s;
    }
    .box{
        height: 300px;
        width: 200px;
        position: relative;
    }
    [class*="radio"]{//两个单选框宽度高度均与卡片一致，并且完全透明，然后覆盖在卡片之上
        position: absolute;
        width: 200px;
        height: 300px;
        z-index: 2;
        margin: 0;
        opacity: 0;
    }
    .radio1:checked ~ .card1{animation: card .6s;top:0;scale:.98;transition-duration:.6s}
    .radio1:checked ~ .card2{z-index: 1;top:10px;transition-duration:.6s}
    .radio1:checked{z-index: 0;}//被选择的单选框设置z-index为0
    //这样它被点击后会自己跑到底部去，这样下次点击就会戳到另外一个单选框
    .radio2:checked ~ .card2{animation: card .6s;top:0;scale:.98;transition-duration:.6s}
    //通过后续兄弟选择器选中卡片，这样选中不同的单选框将控制卡片翻一张。
    .radio2:checked ~ .card1{z-index: 1;top:10px;transition-duration:.6s}
    .radio2:checked{z-index: 0;}//与另一个单选框同类
    @keyframes card{//这里定义一个翻牌的动画
        0%{left:0;z-index:2;top:10px}
        50%{left:230px;z-index:2;rotate:10deg;}
        51%{left:230px;z-index:0;rotate:10deg;}
        100%{left:0;z-index:0;scale:.98;}
    }
</style>

但是这样似乎只能在两张牌之间翻来翻去，那如何可以增加牌的数量呢。这时候只需要结合不使用js实现评分组件中的想法，该案例中选择一颗星星就能选中这颗星星之前的所有星星。同理，我们可以实现选中一个单选框就将它之前的单选框z-index值都设为0,选中最后一个单选框后将所有z-index重置，以实现循环翻牌。

当然这个案例的理论意义是大于实际意义的，每增加一张牌都会产生大量的css代码，其实并不如js来的要好。但是这个案例还是可以作为一个很好的案例，来说明z-index的用法。