HTML&CSS：有个性的复选框

这个页面实现了一个自定义样式的复选框，通过CSS动画和3D效果创建了一个现代化的交互界面。复选框在选中和未选中时显示不同的文本（Yeah!和Nope），并具有良好的视觉效果和用户交互体验。

大家复制代码时，可能会因格式转换出现错乱，导致样式失效。建议先少量复制代码进行测试，若未能解决问题，私信回复源码两字，我会发送完整的压缩包给你。

演示效果

HTML&CSS

html 复制代码

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>公众号关注：前端Hardy</title>
    <style>
        body {
            display: flex;
            align-items: center;
            justify-content: center;
            height: 100vh;
        }

        .checkbox-wrapper-10 .tgl {
            display: none;
        }

        .checkbox-wrapper-10 .tgl,
        .checkbox-wrapper-10 .tgl:after,
        .checkbox-wrapper-10 .tgl:before,
        .checkbox-wrapper-10 .tgl *,
        .checkbox-wrapper-10 .tgl *:after,
        .checkbox-wrapper-10 .tgl *:before,
        .checkbox-wrapper-10 .tgl+.tgl-btn {
            box-sizing: border-box;
        }

        .checkbox-wrapper-10 .tgl::-moz-selection,
        .checkbox-wrapper-10 .tgl:after::-moz-selection,
        .checkbox-wrapper-10 .tgl:before::-moz-selection,
        .checkbox-wrapper-10 .tgl *::-moz-selection,
        .checkbox-wrapper-10 .tgl *:after::-moz-selection,
        .checkbox-wrapper-10 .tgl *:before::-moz-selection,
        .checkbox-wrapper-10 .tgl+.tgl-btn::-moz-selection,
        .checkbox-wrapper-10 .tgl::selection,
        .checkbox-wrapper-10 .tgl:after::selection,
        .checkbox-wrapper-10 .tgl:before::selection,
        .checkbox-wrapper-10 .tgl *::selection,
        .checkbox-wrapper-10 .tgl *:after::selection,
        .checkbox-wrapper-10 .tgl *:before::selection,
        .checkbox-wrapper-10 .tgl+.tgl-btn::selection {
            background: none;
        }

        .checkbox-wrapper-10 .tgl+.tgl-btn {
            outline: 0;
            display: block;
            width: 4em;
            height: 2em;
            position: relative;
            cursor: pointer;
            -webkit-user-select: none;
            -moz-user-select: none;
            -ms-user-select: none;
            user-select: none;
        }

        .checkbox-wrapper-10 .tgl+.tgl-btn:after,
        .checkbox-wrapper-10 .tgl+.tgl-btn:before {
            position: relative;
            display: block;
            content: "";
            width: 50%;
            height: 100%;
        }

        .checkbox-wrapper-10 .tgl+.tgl-btn:after {
            left: 0;
        }

        .checkbox-wrapper-10 .tgl+.tgl-btn:before {
            display: none;
        }

        .checkbox-wrapper-10 .tgl:checked+.tgl-btn:after {
            left: 50%;
        }

        .checkbox-wrapper-10 .tgl-flip+.tgl-btn {
            padding: 2px;
            transition: all 0.2s ease;
            font-family: sans-serif;
            perspective: 100px;
        }

        .checkbox-wrapper-10 .tgl-flip+.tgl-btn:after,
        .checkbox-wrapper-10 .tgl-flip+.tgl-btn:before {
            display: inline-block;
            transition: all 0.4s ease;
            width: 100%;
            text-align: center;
            position: absolute;
            line-height: 2em;
            font-weight: bold;
            color: #fff;
            position: absolute;
            top: 0;
            left: 0;
            -webkit-backface-visibility: hidden;
            backface-visibility: hidden;
            border-radius: 4px;
        }

        .checkbox-wrapper-10 .tgl-flip+.tgl-btn:after {
            content: attr(data-tg-on);
            background: #02C66F;
            transform: rotateY(-180deg);
        }

        .checkbox-wrapper-10 .tgl-flip+.tgl-btn:before {
            background: #FF3A19;
            content: attr(data-tg-off);
        }

        .checkbox-wrapper-10 .tgl-flip+.tgl-btn:active:before {
            transform: rotateY(-20deg);
        }

        .checkbox-wrapper-10 .tgl-flip:checked+.tgl-btn:before {
            transform: rotateY(180deg);
        }

        .checkbox-wrapper-10 .tgl-flip:checked+.tgl-btn:after {
            transform: rotateY(0);
            left: 0;
            background: #7FC6A6;
        }

        .checkbox-wrapper-10 .tgl-flip:checked+.tgl-btn:active:after {
            transform: rotateY(20deg);
        }
    </style>
</head>

<body>
    <div class="checkbox-wrapper-10">
        <input checked="" type="checkbox" id="cb5" class="tgl tgl-flip">
        <label for="cb5" data-tg-on="Yeah!" data-tg-off="Nope" class="tgl-btn"></label>
    </div>

</body>

</html>

HTML 结构

checkbox-wrapper-10：包含一个自定义样式的复选框。
tgl tgl-flip：定义了一个复选框，使用checked属性使其默认选中。
tgl-btn：定义了复选框的标签，包含两个状态文本（Yeah!和Nope）。

CSS 样式

body：使用Flexbox布局，居中显示内容。设置高度为视口高度（100vh）。
.checkbox-wrapper-10 .tgl：隐藏原始复选框。
.checkbox-wrapper-10 .tgl+.tgl-btn：定义复选框的样式，包括宽度、高度、位置和光标。
.checkbox-wrapper-10 .tgl+.tgl-btn:after, .checkbox-wrapper-10 .tgl+.tgl-btn:before：定义复选框的两个状态（选中和未选中）的样式。
.checkbox-wrapper-10 .tgl-flip+.tgl-btn：添加3D翻转效果，设置透视和过渡效果。
.checkbox-wrapper-10 .tgl-flip+.tgl-btn:after, .checkbox-wrapper-10 .tgl-flip+.tgl-btn:before：定义复选框的两个状态文本的样式，包括颜色、字体大小、行高和过渡效果。
.checkbox-wrapper-10 .tgl-flip:checked+.tgl-btn:before：定义复选框选中时的样式，包括旋转效果。
.checkbox-wrapper-10 .tgl-flip:checked+.tgl-btn:after：定义复选框选中时的样式，包括旋转效果和背景颜色。

各位互联网搭子，要是这篇文章成功引起了你的注意，别犹豫，关注、点赞、评论、分享走一波，让我们把这份默契延续下去，一起在知识的海洋里乘风破浪！