有动画效果的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;
        }
        .checkbox ~ label {
            margin-left: 10px;
            cursor: pointer;
            -webkit-transition: 0.3s;
            transition: 0.3s;
        }
        .checkbox::before {
            position: absolute;
            content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18px' height='18px' fill='none' stroke-width='2px' stroke='white' stroke-linecap='round' viewBox='0 0 21 21'%3E%3Cpolyline points='5 10.75 8.5 14.25 16 6'%3E%3C/polyline%3E%3C/svg%3E");
            -webkit-transform: scale(0);
            transform: scale(0);
            -webkit-transition: 0.3s;
            transition: 0.3s;
        }
        .checkbox::after {
            position: absolute;
            content: "";
            width: 100%;
            height: 100%;
            background: var(--checkbox-bg-color);
            border-radius: inherit;
            box-shadow: inset 0 0 0 1px var(--border-color);
            -webkit-transition: 0.2s;
            transition: 0.2s;
        }
        .checkbox:hover {
            --border-color: var(--checkbox-hover-color);
        }
        .checkbox:checked::before {
            -webkit-transform: scale(1);
            transform: scale(1);
        }
        .checkbox:checked::after {
            -webkit-transform: scale(0);
            transform: scale(0);
        }
        .checkbox:disabled {
            --checkbox-bg-color: var(--checkbox-disabled-bg-color);
            --checkbox-checked-color: var(--checkbox-disabled-checked-color);
            cursor: not-allowed;
        }
        .checkbox:disabled ~ label {
            cursor: not-allowed;
        }
        .checkbox.bounce:checked::before {
            -webkit-transition: none;
            transition: none;
            animation: scale-out-bounce 0.6s ease-out reverse forwards;
        }

@-webkit-keyframes scale-out-bounce {
            0% {
                -webkit-transform: scale(1);
                transform: scale(1);
            }
            4% {
                -webkit-transform: scale(0.98);
                transform: scale(0.98);
            }
            8% {
                -webkit-transform: scale(0.99);
                transform: scale(0.99);
            }
           .........完整代码请登录后点击上方下载按钮下载查看