滑动开关

HTML

1
2
3
4
<label class="switch">
    <input type="checkbox" name="test">
    <div class="slider"></div>
</label>

CSS

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
.switch {
    display: block;
    width: 50px;
    height: 25px;
    border: 1px solid #999;
    border-radius: 13.5px;
    position: relative;
    user-select: none;
    cursor: pointer;
}
.slider{
    content: '';
    width: 40%;
    height: 80%;
    margin: 5%;
    border-radius: 50%;
    background-color: #38e638;
    position: absolute;
    top: 0;
    left: 0;
    transition: left .3s;
}
.switch input{
    display: none;
}
.switch input:checked ~ .slider{
    left: 50%;
    background-color: #999;
}

最后更新： 2024年04月12日 02:46

原始链接： https://xiaguochang.github.io/posts/56d42c75/