我用 CSS 告诉你，我每天是怎么度过的~

偏执的太偏执、 2022-08-29 10:43 193阅读 0赞

# 我用 CSS 告诉你，我每天是怎么度过的~ #

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzQ2Mzc0OTY5_size_16_color_FFFFFF_t_70]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzQ2Mzc0OTY5_size_16_color_FFFFFF_t_70 1]

## 代码如下 ##

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzQ2Mzc0OTY5_size_16_color_FFFFFF_t_70 2]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzQ2Mzc0OTY5_size_16_color_FFFFFF_t_70 3]

* { 
        padding: 0;
        margin: 0;
    }
    
    html,
    body { 
        height: 100%;
    }
    
    body { 
        background-color: rgb(81, 43, 80);
        display: flex;
        justify-content: center;
        align-items: center;
    }
    
    .main-container { 
        width: 300px;
    }
    
    .main-container .header { 
        font-size: 25px;
        color: rgb(240, 208, 167);
        text-align: center;
        line-height: 80px;
    }
    
    .main-container .list-container>ul { 
        list-style: none;
    }
    
    .main-container .list-container>ul>li { 
        height: 50px;
        background-color: rgb(182, 104, 118);
        font-size: 16px;
        font-weight: 200;
        line-height: 50px;
        color: aliceblue;
        position: relative;
        border-bottom: 1px solid rgb(81, 43, 80);
        z-index: 1;
    }
    
    .main-container .list-container>ul>li>label>span { 
        display: block;
        position: absolute;
        top: 0;
        left: 0;
        height: 50px;
        width: calc(100% - 70px);
        padding: 0 20px 0 50px;
        user-select: none;
        transition: .5s;
    }
    
    input[type='checkbox'] { 
        width: 0;
    }
    
    input[type='checkbox']::before { 
        width: 10px;
        height: 10px;
        content: '';
        display: block;
        background-color: aliceblue;
        border: 5px solid aliceblue;
        border-radius: 20px;
        position: absolute;
        top: calc(50% - 10px);
        left: 10px;
        z-index: 3;
        transition: .5s;
    }
    
    input[type='checkbox']:checked::before { 
        background-color: rgb(81, 43, 80);
    }
    
    input[type='checkbox']:checked+span { 
        background-color: rgb(102, 55, 100);
        text-decoration: line-through;
    }

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzQ2Mzc0OTY5_size_16_color_FFFFFF_t_70]: /images/20220829/8622034ee62449cfa7b8f3704473a178.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzQ2Mzc0OTY5_size_16_color_FFFFFF_t_70 1]: /images/20220829/0df16defb106491580f06f9790904202.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzQ2Mzc0OTY5_size_16_color_FFFFFF_t_70 2]: /images/20220829/e748585c7055434d9505f391d5ba2771.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzQ2Mzc0OTY5_size_16_color_FFFFFF_t_70 3]: /images/20220829/8f7cf31fdbf3449c9df3726752c8d09b.png