CSS100Day(27)-清单列表使用input替换JS

1
<div class="frame">
2
    <div class="list">
3
        <div class="head">
4
            <div class="title">星期五</div>
5
            <div class="subTitle">2026年6月19日</div>
6
        </div>
7
        <ul>
8
            <li>
9
                <input type="checkbox" id="item-1" name="item-1" />
10
                <label for="item-1" class="text">添加任务清单列表</label>
11
                <label for="item-1" class="button"></label>
12
                <svg width="15px" height="10px" class="checkmark">
13
                    <polyline points="1,5 6,9 14,1" />
14
                </svg>
15
            </li>
16
            <li>
17
                <input type="checkbox" id="item-2" name="item-2" />
18
                <label for="item-2" class="text">完成第一项任务</label>
19
                <label for="item-2" class="button"></label>
20
                <svg width="15px" height="10px" class="checkmark">
21
                    <polyline points="1,5 6,9 14,1" />
22
                </svg>
23
            </li>
24
            <li>
25
                <input type="checkbox" id="item-3" name="item-3" />
26
                <label for="item-3" class="text">编写css内容</label>
27
                <label for="item-3" class="button"></label>
28
                <svg width="15px" height="10px" class="checkmark">
29
                    <polyline points="1,5 6,9 14,1" />
30
                </svg>
31
            </li>
32
            <li>
33
                <input type="checkbox" id="item-4" name="item-4" />
34
                <label for="item-4" class="text">震惊整个世界</label>
35
                <label for="item-4" class="button"></label>
36
                <svg width="15px" height="10px" class="checkmark">
37
                    <polyline points="1,5 6,9 14,1" />
38
                </svg>
39
            </li>
40
        </ul>
41
    </div>
42
</div>

1
.frame {
2
    width: 400px;
3
    height: 400px;
4
    border-radius: 2px;
5
    box-shadow: 1px 2px 10px 0 rgba(0, 0, 0, 0.3);
6
    color: #497081;
7
    background: linear-gradient(to top right, #fda231 0%, #fdca31 100%);
8
    display: flex;
9
    align-items: center;
10
    justify-content: center;
11
}
12

13
.list {
14
    width: 240px;
15
    height: 280px;
16
    background: #fff;
17
    border-radius: 3px;
18
    box-shadow: 4px 8px 12px 0 rgba(0, 0, 0, 0.2);
19
    display: flex;
20
    flex-direction: column;
21
    .head {
22
        text-align: center;
23
        padding: 20px 0;
24
        margin: 0 30px;
25
        border-bottom: 1px solid #d4dce0;
26
    }
27
    .title {
28
        font-weight: 600;
29
        font-size: 20px;
30
        line-height: 30px;
31
        text-align: center;
32
    }
33
    .subTitle {
34
        font-size: 12px;
35
        line-height: 18px;
36
        text-align: center;
37
    }
38
    ul {
39
        list-style: none;
40
        padding: 4px 0;
41
        margin: 0 30px;
42
        position: relative;
43
        li {
44
            position: relative;
45
            display: block;
46
            margin: 24px 0;
47
            height: 14px;
48
            display: flex;
49
            justify-content: space-between;
50
            align-items: center;
51
        }
52
        .text {
53
            font-size: 13px;
54
            line-height: 14px;
55
            cursor: pointer;
56
            transition: all 0.3s ease-in-out;
57
        }
58
        .button {
59
            position: relative;
60
            z-index: 2;
61
            box-sizing: border-box;
62
            float: right;
63
            width: 14px;
64
            height: 14px;
65
            border: 1px solid #497081;
66
            border-radius: 50%;
67
            cursor: pointer;
68
            transition: all 0.4s ease-out 0.5s;
69
        }
70
        .checkmark {
71
            position: absolute;
72
            top: 2px;
73
            right: 0;
74
            stroke: #c8d4d9;
75
            fill: none;
76
            stroke-width: 1.5;
77
            stroke-dasharray: 30 30;
78
            stroke-dashoffset: 30;
79
            transition: all 0.5s ease-out;
80
        }
81
        input {
82
            display: none;
83
            &:checked ~ .text {
84
                color: #c8d4d9;
85
            }
86
            &:checked ~ .button {
87
                transition: all 0.4s ease-in;
88
                scale: 1.5;
89
                opacity: 0;
90
            }
91
            &:checked ~ .checkmark {
92
                stroke-dashoffset: 0;
93
                transition: all 0.5s ease-out 0.4s;
94
            }
95
        }
96
    }
97
}