From 82aeffad1a9fe7e6826a159406513c1e5b59e9a0 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E7=8E=8B=E8=89=BA=E6=9E=97?= <2285353012@qq.com>
Date: Wed, 15 Dec 2021 16:56:11 +0800
Subject: [PATCH] pop and switch

---
 .../bottom.html"                              | 93 ++++++++++++++++++
 .../left.html"                                | 94 ++++++++++++++++++
 .../right.html"                               | 95 +++++++++++++++++++
 .../top.html"                                 | 90 ++++++++++++++++++
 .../211210-css-Switch/index.html"             | 80 ++++++++++++++++
 5 files changed, 452 insertions(+)
 create mode 100644 "\347\216\213\350\211\272\346\236\227/211209css\346\260\224\346\263\241\344\275\234\344\270\232/bottom.html"
 create mode 100644 "\347\216\213\350\211\272\346\236\227/211209css\346\260\224\346\263\241\344\275\234\344\270\232/left.html"
 create mode 100644 "\347\216\213\350\211\272\346\236\227/211209css\346\260\224\346\263\241\344\275\234\344\270\232/right.html"
 create mode 100644 "\347\216\213\350\211\272\346\236\227/211209css\346\260\224\346\263\241\344\275\234\344\270\232/top.html"
 create mode 100644 "\347\216\213\350\211\272\346\236\227/211210-css-Switch/index.html"
diff --git "a/\347\216\213\350\211\272\346\236\227/211209css\346\260\224\346\263\241\344\275\234\344\270\232/bottom.html" "b/\347\216\213\350\211\272\346\236\227/211209css\346\260\224\346\263\241\344\275\234\344\270\232/bottom.html"
new file mode 100644
index 0000000..e9530ee
--- /dev/null
+++ "b/\347\216\213\350\211\272\346\236\227/211209css\346\260\224\346\263\241\344\275\234\344\270\232/bottom.html"
@@ -0,0 +1,93 @@
+<!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>Document</title>
+    <style>
+        :root {
+            /* 定义气泡弹出框背景色 */
+            --poptipBg: #30363d;
+            /* 弹出框字体颜色 */
+            --color: #fff;
+            /* 弹出框三角形边长 */
+            --triangle: 8px;
+            /* 弹出框与元素的偏移 */
+            --distance: -12px;
+        }
+
+        .poptip {
+            position: relative;
+            z-index: 101;
+        }
+
+        /* 过渡动画 默认为hidden状态 hover后变为visible 由透明变为不透明 */
+        .poptip::before,
+        .poptip::after {
+            visibility: hidden;
+            opacity: 0;
+            transform: translate3d(0, 0, 0);
+            transition: all 0.3s ease 0.2s;
+            box-sizing: border-box;
+        }
+
+        /* 向下的小箭头 */
+        .poptip::before {
+            content: "";
+            position: absolute;
+            width: 0px;
+            height: 0px;
+            border-style: solid;
+            border-width: 0 var(--triangle) var(--triangle) var(--triangle);
+            border-color: transparent transparent var(--poptipBg) transparent;
+            left: calc(50% - var(--triangle));
+            top: 51px;
+            transform: translateX(0%) translateY(var(--distance));
+        }
+
+        /* 提示框的样式 */
+        .poptip::after {
+            width: 300px;
+            font-size: 14px;
+            color: var(--color);
+            content: attr(aria-controls);
+            position: absolute;
+            padding: 6px 12px;
+            /* white-space: nowrap; */
+            z-index: -1;
+            left: 50%;
+            top: 173%;
+            transform: translateX(-50%) translateY(var(--distance));
+            background: var(--poptipBg);
+            line-height: 1;
+            border-radius: 2px;
+        }
+
+        .poptip:hover::before,
+        .poptip:hover::after {
+            visibility: visible;
+            opacity: 1;
+        }
+
+        .btn {
+            width: 100px;
+            line-height: 1.5;
+            padding: 5px 10px;
+            color: #fff;
+            background: #00adb5;
+            border-radius: 4px;
+            text-align: center;
+            cursor: pointer;
+            margin: 200px auto;
+        }
+    </style>
+</head>
+
+<body>
+    <div class="poptip btn"
+        aria-controls="弹出气泡123弹出气泡123弹出气泡123弹出气泡123弹出气泡123弹出气泡123弹出气泡123弹出气泡123弹出气泡123弹出气泡123弹出气泡123弹出气泡123">气泡提示</div>
+</body>
+
+</html>
\ No newline at end of file
diff --git "a/\347\216\213\350\211\272\346\236\227/211209css\346\260\224\346\263\241\344\275\234\344\270\232/left.html" "b/\347\216\213\350\211\272\346\236\227/211209css\346\260\224\346\263\241\344\275\234\344\270\232/left.html"
new file mode 100644
index 0000000..cb8a948
--- /dev/null
+++ "b/\347\216\213\350\211\272\346\236\227/211209css\346\260\224\346\263\241\344\275\234\344\270\232/left.html"
@@ -0,0 +1,94 @@
+<!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>Document</title>
+    <style>
+        :root {
+            /* 定义气泡弹出框背景色 */
+            --poptipBg: #30363d;
+            /* 弹出框字体颜色 */
+            --color: #fff;
+            /* 弹出框三角形边长 */
+            --triangle: 8px;
+            /* 弹出框与元素的偏移 */
+            --distance: -12px;
+        }
+
+        .poptip {
+            position: relative;
+            z-index: 101;
+        }
+
+        /* 过渡动画 默认为hidden状态 hover后变为visible 由透明变为不透明 */
+        .poptip::before,
+        .poptip::after {
+            visibility: hidden;
+            opacity: 0;
+            transform: translate3d(0, 0, 0);
+            transition: all 0.3s ease 0.2s;
+            box-sizing: border-box;
+        }
+
+        /* 向下的小箭头 */
+        .poptip::before {
+            content: "";
+            position: absolute;
+            width: 0px;
+            height: 0px;
+            border-style: solid;
+            border-width: var(--triangle) 0 var(--triangle) var(--triangle);
+            border-color: transparent transparent transparent var(--poptipBg);
+            left: calc(50% - var(--triangle));
+            top: 23px;
+            left: 7px;
+            transform: translateX(-322%) translateY(var(--distance));
+        }
+
+        /* 提示框的样式 */
+        .poptip::after {
+            width: 300px;
+            font-size: 14px;
+            color: var(--color);
+            content: attr(aria-controls);
+            position: absolute;
+            padding: 6px 12px;
+            /* white-space: nowrap; */
+            z-index: -1;
+            right: -10%;
+            top: -10%;
+            transform: translateX(-50%) translateY(var(--distance));
+            background: var(--poptipBg);
+            line-height: 1;
+            border-radius: 2px;
+        }
+
+        .poptip:hover::before,
+        .poptip:hover::after {
+            visibility: visible;
+            opacity: 1;
+        }
+
+        .btn {
+            width: 100px;
+            line-height: 1.5;
+            padding: 5px 10px;
+            color: #fff;
+            background: #00adb5;
+            border-radius: 4px;
+            text-align: center;
+            cursor: pointer;
+            margin: 200px auto;
+        }
+    </style>
+</head>
+
+<body>
+    <div class="poptip btn"
+        aria-controls="弹出气泡123弹出气泡123弹出气泡123弹出气泡123弹出气泡123弹出气泡123弹出气泡123弹出气泡123弹出气泡123弹出气泡123弹出气泡123弹出气泡123">气泡提示</div>
+</body>
+
+</html>
\ No newline at end of file
diff --git "a/\347\216\213\350\211\272\346\236\227/211209css\346\260\224\346\263\241\344\275\234\344\270\232/right.html" "b/\347\216\213\350\211\272\346\236\227/211209css\346\260\224\346\263\241\344\275\234\344\270\232/right.html"
new file mode 100644
index 0000000..a3e9a91
--- /dev/null
+++ "b/\347\216\213\350\211\272\346\236\227/211209css\346\260\224\346\263\241\344\275\234\344\270\232/right.html"
@@ -0,0 +1,95 @@
+<!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>Document</title>
+    <style>
+        :root {
+            /* 定义气泡弹出框背景色 */
+            --poptipBg: #30363d;
+            /* 弹出框字体颜色 */
+            --color: #fff;
+            /* 弹出框三角形边长 */
+            --triangle: 8px;
+            /* 弹出框与元素的偏移 */
+            --distance: -12px;
+        }
+
+        .poptip {
+            position: relative;
+            z-index: 101;
+        }
+
+        /* 过渡动画 默认为hidden状态 hover后变为visible 由透明变为不透明 */
+        .poptip::before,
+        .poptip::after {
+            visibility: hidden;
+            opacity: 0;
+            transform: translate3d(0, 0, 0);
+            transition: all 0.3s ease 0.2s;
+            box-sizing: border-box;
+        }
+
+        /* 向下的小箭头 */
+        .poptip::before {
+            content: "";
+            position: absolute;
+            width: 0px;
+            height: 0px;
+            border-style: solid;
+            border-width: var(--triangle) var(--triangle) var(--triangle) 0;
+            border-color: transparent var(--poptipBg) transparent transparent;
+            left: calc(50% - var(--triangle));
+            top: 23px;
+            left: 128px;
+            transform: translateX(0%) translateY(var(--distance));
+        }
+
+        /* 提示框的样式 */
+        .poptip::after {
+            width: 300px;
+            font-size: 14px;
+            color: var(--color);
+            content: attr(aria-controls);
+            position: absolute;
+            /* position: relative; */
+            padding: 6px 12px;
+            /* white-space: nowrap; */
+            z-index: -1;
+            left: 239%;
+            top: -10%;
+            transform: translateX(-50%) translateY(var(--distance));
+            background: var(--poptipBg);
+            line-height: 1;
+            border-radius: 2px;
+        }
+
+        .poptip:hover::before,
+        .poptip:hover::after {
+            visibility: visible;
+            opacity: 1;
+        }
+
+        .btn {
+            width: 100px;
+            line-height: 1.5;
+            padding: 5px 10px;
+            color: #fff;
+            background: #00adb5;
+            border-radius: 4px;
+            text-align: center;
+            cursor: pointer;
+            margin: 200px auto;
+        }
+    </style>
+</head>
+
+<body>
+    <div class="poptip btn"
+        aria-controls="弹出气泡123弹出气泡123弹出气泡123弹出气泡123弹出气泡123弹出气泡123弹出气泡123弹出气泡123弹出气泡123弹出气泡123弹出气泡123弹出气泡123">气泡提示</div>
+</body>
+
+</html>
\ No newline at end of file
diff --git "a/\347\216\213\350\211\272\346\236\227/211209css\346\260\224\346\263\241\344\275\234\344\270\232/top.html" "b/\347\216\213\350\211\272\346\236\227/211209css\346\260\224\346\263\241\344\275\234\344\270\232/top.html"
new file mode 100644
index 0000000..18140ca
--- /dev/null
+++ "b/\347\216\213\350\211\272\346\236\227/211209css\346\260\224\346\263\241\344\275\234\344\270\232/top.html"
@@ -0,0 +1,90 @@
+<!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>Document</title>
+    <style>
+        :root {
+            /* 定义气泡弹出框背景色 */
+            --poptipBg: #30363d;
+            /* 弹出框字体颜色 */
+            --color: #fff;
+            /* 弹出框三角形边长 */
+            --triangle: 8px;
+            /* 弹出框与元素的偏移 */
+            --distance: -12px;
+        }
+
+        .poptip {
+            position: relative;
+            z-index: 101;
+        }
+        /* 过渡动画 默认为hidden状态 hover后变为visible 由透明变为不透明 */
+        .poptip::before,
+        .poptip::after {
+            visibility: hidden;
+            opacity: 0;
+            transform: translate3d(0, 0, 0);
+            transition: all 0.3s ease 0.2s;
+            box-sizing: border-box;
+        }
+        /* 向下的小箭头 */
+        .poptip::before {
+            content: "";
+            position: absolute;
+            width: 0px;
+            height: 0px;
+            border-style: solid;
+            border-width: var(--triangle) var(--triangle) 0 var(--triangle);
+            border-color: var(--poptipBg) transparent transparent transparent;
+            left: calc(50% - var(--triangle));
+            top: 0px;
+            transform: translateX(0%) translateY(var(--distance));
+        }
+        /* 提示框的样式 */
+        .poptip::after {
+            width: 300px;
+            font-size: 14px;
+            color: var(--color);
+            /* 内容为标签内的属性值 */
+            content: attr(aria-controls);
+            position: absolute;
+            padding: 6px 12px;
+            /* white-space: nowrap; */
+            z-index: -1;
+            left: 50%;
+            bottom: 100%;
+            transform: translateX(-50%) translateY(var(--distance));
+            background: var(--poptipBg);
+            line-height: 1;
+            border-radius: 2px;
+        }
+
+        .poptip:hover::before,
+        .poptip:hover::after {
+            visibility: visible;
+            opacity: 1;
+        }
+
+        .btn {
+            width: 100px;
+            line-height: 1.5;
+            padding: 5px 10px;
+            color: #fff;
+            background: #00adb5;
+            border-radius: 4px;
+            text-align: center;
+            cursor: pointer;
+            margin: 200px auto;
+        }
+    </style>
+</head>
+
+<body>
+    <div class="poptip btn" aria-controls="弹出气泡123弹出气泡123弹出气泡123弹出气泡123弹出气泡123弹出气泡123弹出气泡123弹出气泡123弹出气泡123弹出气泡123弹出气泡123弹出气泡123">气泡提示</div>
+</body>
+
+</html>
\ No newline at end of file
diff --git "a/\347\216\213\350\211\272\346\236\227/211210-css-Switch/index.html" "b/\347\216\213\350\211\272\346\236\227/211210-css-Switch/index.html"
new file mode 100644
index 0000000..8631313
--- /dev/null
+++ "b/\347\216\213\350\211\272\346\236\227/211210-css-Switch/index.html"
@@ -0,0 +1,80 @@
+<!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: 800px;
+            display: flex;
+            justify-content: space-around;
+        }
+        input[type="checkbox"]{
+            display: none; 
+        }
+        label::before,label::after{
+            position: absolute;
+            transition: all 0.3s;
+        }
+        /* 被选中的情况下 */
+        /* 选中后 为6px  */
+        input[type="checkbox"]:checked+label::before{
+            content: '开';
+            left: 6px;
+        }
+
+        input[type="checkbox"]:checked+label::after{
+            left: 25px;
+        }
+        input[type="checkbox"]:checked+label{
+            background-color: #b4a078;
+        }
+        /* 定义字 在非选中状态下 为关 然后left值为27px */
+        label::before{
+            content: '关';
+            font-size: 16px;
+            color: white;
+            line-height: 1;
+            top: 4px;
+            left: 27px;
+        }
+        /* 定义圆形白色块 */
+        label::after{
+            content: '';
+            background-color: white;
+            width: 24px;
+            height: 24px;
+            border-radius: 12px;
+            left: 1px;
+        }
+        /* 定义label块 设置上背景颜色 将背景颜色设置为过渡动画 
+        且要设置为相对定位 让伪元素相对于他定位 */
+        label{
+            position: relative;
+            width: 50px;
+            height: 25px;
+            background-color: lightgray;
+            border-radius: 13px;
+            cursor: pointer;
+            transition: background-color 0.3s;
+        }
+        /* 带有disabled属性的紧靠label 变为不可选中 且为半透明 */
+        input[type="checkbox"]:disabled+label{
+            opacity: 0.5;
+            cursor: not-allowed;
+        }
+    </style>
+</head>
+<body>
+    <div class="box">
+        <input type="checkbox" id="switch" checked>
+        <label for="switch"></label>
+        <input type="checkbox" id="switch-notallowed" disabled>
+        <label for="switch-unallow"></label>
+        <input type="checkbox" id="switch-checked-notallowed" disabled checked>
+        <label for="switch-checked-unallow"></label>
+    </div>
+    
+</body>
+</html>
\ No newline at end of file
-- 
Gitee

