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>