From 69d635339e052cdff6c46055bc904a52904f41df Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E9=BB=84=E5=BF=83=E9=92=B0?= <3486274891@qq.com>
Date: Wed, 15 Dec 2021 09:40:14 +0800
Subject: [PATCH] =?UTF-8?q?=E6=8F=90=E4=BA=A412.10=E4=BD=9C=E4=B8=9A?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../\345\274\200\345\205\263.html"            | 77 +++++++++++++++++++
 1 file changed, 77 insertions(+)
 create mode 100644 "\351\273\204\345\277\203\351\222\260/2021.12.10 CSS\346\212\200\345\267\247/\345\274\200\345\205\263.html"
diff --git "a/\351\273\204\345\277\203\351\222\260/2021.12.10 CSS\346\212\200\345\267\247/\345\274\200\345\205\263.html" "b/\351\273\204\345\277\203\351\222\260/2021.12.10 CSS\346\212\200\345\267\247/\345\274\200\345\205\263.html"
new file mode 100644
index 0000000..2a65dcc
--- /dev/null
+++ "b/\351\273\204\345\277\203\351\222\260/2021.12.10 CSS\346\212\200\345\267\247/\345\274\200\345\205\263.html"	
@@ -0,0 +1,77 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Document</title>
+    <style>
+        .box{
+            width:500px;
+            display: flex;
+            justify-content: space-around;
+        }
+        input[type = "checkbox"]{
+            display: none;
+        }
+        label{
+            position: relative;
+            width: 50px;
+            height: 26px;
+            background: skyblue;
+            border-radius: 13px;
+            cursor: pointer;
+            transition: background .3s;
+        }
+        label[disabled]{
+            cursor: not-allowed;
+            opacity: .5;
+        }
+        label::before,
+        label::after{
+            transition: all .3s;
+            position: absolute;
+        }
+        label::before{
+            content: '关';
+            font-size: 16px;
+            line-height: 1;
+            top: 5px;
+            left: 28px;
+            color: white;
+        }
+        label::after{
+            content: '';
+            top: 1px;
+            left: 1px;
+            width: 24px;
+            height: 24px;
+            border-radius: 12px;
+            background: white;
+        }
+        input[type = "checkbox"]:checked + label{
+            background: thistle;
+        }
+        input[type = "checkbox"]:checked+label::before{
+            content: '开';
+            left: 6px;
+        }
+        input[type="checkbox"]:active+label::after {
+            width: 23px;
+        }
+
+        input[type="checkbox"]:checked+label::after {
+            left: 25px;
+        }
+    </style>
+</head>
+<body>
+       <div class="box">
+        <input type="checkbox" id="switch" checked hidden>
+        <label for="switch"></label>
+        <input type="checkbox" id="switch-disabled" disabled hidden>
+        <label for="switch-disabled" disabled></label>
+        <input type="checkbox" id="switch-checked-disabled" checked disabled hidden>
+        <label for="switch-checked-disabled" disabled></label>
+    </div>
+</body>
+</html>
\ No newline at end of file
-- 
Gitee

