CSS100Day(19)-纯css实现滑动radio轮播图

1
<div class="frame">
2
    <div class="center">
3
        <input type="radio" id="check-1" name="rd" />
4
        <label class="circle" for="check-1" id="c1"></label>
5
        <input type="radio" id="check-2" name="rd" />
6
        <label class="circle" for="check-2" id="c2"></label>
7
        <input type="radio" id="check-3" name="rd" />
8
        <label class="circle" for="check-3" id="c3"></label>
9
        <div class="active"></div>
10
        <div class="bg">
11
            <div class="bg-slide bg-1"></div>
12
            <div class="bg-slide bg-2"></div>
13
            <div class="bg-slide bg-3"></div>
14
        </div>
15
    </div>
16
</div>

1
.frame {
2
    width: 400px;
3
    height: 400px;
4
    box-shadow: 1px 2px 10px 0 rgba(0, 0, 0, 0.3);
5
    border-radius: 2px;
6
    position: relative;
7
}
8

9
.center {
10
    width: 400px;
11
    height: 400px;
12
    position: absolute;
13
    inset: 0;
14
    overflow: hidden;
15
}
16

17
input[type="radio"] {
18
    display: none;
19
}
20

21
.circle {
22
    box-sizing: border-box;
23
    position: absolute;
24
    z-index: 5;
25
    top: 175px;
26
    left: 115px;
27
    width: 50px;
28
    height: 50px;
29
    border: 2px solid #fff;
30
    border-radius: 50%;
31
    cursor: pointer;
32
}
33

34
#c2 {
35
    left: 175px;
36
}
37

38
#c3 {
39
    left: 235px;
40
}
41

42
.active {
43
    position: absolute;
44
    z-index: 10;
45
    width: 40px;
46
    height: 40px;
47
    background: #fff;
48
    border-radius: 50%;
49
    top: 180px;
50
    left: 120px;
51
    transition: all 1s ease;
52
}
53

54
#check-1:checked ~ .active {
55
    transform: translateX(0px);
56
}
57

58
#check-2:checked ~ .active {
59
    transform: translateX(60px);
60
}
61

62
#check-3:checked ~ .active {
63
    transform: translateX(120px);
64
}
65

66
.bg {
67
    position: absolute;
68
    width: 400px;
69
    height: 400px;
70
    top: 0;
71
    left: 0;
72
    display: flex;
73
    transition: all 1s ease;
74
    transform: translateX(0px);
75
}
76
.bg-slide {
77
    min-width: 400px;
78
    height: 400px;
79
}
80
.bg-1 {
81
    background: #9b59b6;
82
}
83
.bg-2 {
84
    background: #3498db;
85
}
86
.bg-3 {
87
    background: #1abc9c;
88
}
89

90
#check-1:checked ~ .bg {
91
    transform: translateX(0px);
92
}
93
#check-2:checked ~ .bg {
94
    transform: translateX(-400px);
95
}
96
#check-3:checked ~ .bg {
97
    transform: translateX(-800px);
98
}