有动画效果的checkbox美化-html代码-BFW代码库

有动画效果的checkbox美化

代码语言：html

代码描述：有动画效果的checkbox美化

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">

    <style>
        body {
            display: -webkit-box;
            display: flex;
            -webkit-box-pack: center;
            justify-content: center;
            -webkit-box-align: center;
            align-items: center;
            min-height: 100vh;
            background: #eceffc;
        }

        .checkbox {
            --checkbox-bg-color: white;
            --border-color: #ccd1d9;
            --checkbox-hover-color: #aab2bd;
            --checkbox-checked-color: #3bafda;
            --checkbox-disabled-bg-color: #e6e9ed;
            --checkbox-disabled-checked-color: #aab2bd;
            position: relative;
            width: 18px;
            height: 18px;
            margin: 0;
            background: var(--checkbox-checked-color);
            border: none;
            border-radius: 4px;
            cursor: pointer;
            -webkit-appearance: none;
            -moz-appearance: none;
            appearance: none;
            outline: none;
            -webkit-transition: 0.3s;
            transition: 0.3s;
       .........完整代码请登录后点击上方下载按钮下载查看