动态勾选按钮

html代码：

<div class="container">

        <label for="yes" id="">

            <input type="checkbox" name="" id="yes">

            <span>自动登录</span>

        </label>

        <label for="forget" id="">

            <input type="checkbox" name="" id="forget">

            <span>忘记密码</span>

        </label>

    </div>

 

css代码：

<style>

        *{

/*初始化 清除内外边距*/

            margin:0;

            padding:0;

            box-sizing:border-box;

        }

        body{

            /* 弹性布局 */

            display:flex;

            height: 100vh;

            /* 水平垂直居中 */

            justify-content: center;

            align-items: center;

            background-color:#f4e7ec ;

        }

        .container label input{

            /* 隐藏元素 */

            visibility: hidden;

        }

        .container label{

            /* 让复选框和文字在一行*/

            display: flex;

        }

        .container span{

            display:flex;

            /* 让文字和伪元素水平居中 */

            justify-content: center;

            font-size: 30px;

        }

        .container span::before{

            content:"";

            /* 伪元素是行内元素需要转换 */

            display:block;

            width: 20px;

            height: 20px;

            margin:10px 10px 0 0;

            border:2px solid #333;

            /* 过渡让动画不僵硬 */

            transition: all .4s;

        }

        .container label input:checked+span::before{

            /* 上边框和左边框消失 */

            border-top:none;

            border-left:none;

            /* 变高 让右边框变长 */

            height: 30px;

            border-color: yellowgreen;

            /* 顺时针旋转45度 */

            transform:translate(-5px,-5px) rotate(45deg);

        }

    </style>