CSS 自定义复选框样式：旋转动画效果

这段代码使用 CSS 创建一个自定义的复选框样式，包含旋转动画效果。

label {
    width: 50px;
    height: 50px;
    cursor: pointer;
}

input {
    display: none;
}

.checkbox {
    display: block;
    width: inherit;
    height: inherit;
    border: 3px solid #fff;
    border-radius: 6px;
    transition: all 0.4s;
}

input:checked ~ .checkbox {
    transform: rotate(45deg);
    width: 20px;
    margin-left: 16px;
    border-color: rgb(254, 188, 46);
    border-top-color: transparent;
    border-left-color: transparent;
    border-radius: 0;
}

解释:

• label 元素: 宽度和高度设置为 50px，光标样式为指针。
• input 元素: 隐藏，但与 label 元素相关联。
• .checkbox 类: 定义为一个块级元素，宽度和高度与父元素（label）相同，边框为白色实线，圆角为 6px，动画过渡效果为 0.4 秒。
• input:checked ~ .checkbox: 当 input 元素被选中时，改变 .checkbox 的样式。它会旋转 45 度，宽度变为 20px，左边距增加 16px，边框颜色变为橙黄色 (rgb(254, 188, 46))，同时上边框和左边框会变为透明，圆角被设置为 0。

该代码通过 CSS 伪类 :checked 和邻近选择器 ~ 实现点击复选框时，label 元素的动态变化，最终呈现一个简洁美观且具有动画效果的自定义复选框。