From 7f9224c5b05a7e2efe57e7fae2d428413ffb09ac Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E5=8E=9F=E5=86=AC=E6=A2=85?= <17878161255@example.com>
Date: Thu, 9 Dec 2021 22:11:47 +0800
Subject: [PATCH] =?UTF-8?q?=E6=8F=90=E4=BA=A4=E4=BD=9C=E4=B8=9A?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../triangle.html"                            | 92 +++++++++++++++++++
 ...\346\241\206\346\225\210\346\236\234.html" | 89 ++++++++++++++++++
 2 files changed, 181 insertions(+)
 create mode 100644 "\345\216\237\345\206\254\346\242\205/css\346\225\210\346\236\234.\345\216\237\345\206\254\346\242\205/triangle.html"
 create mode 100644 "\345\216\237\345\206\254\346\242\205/css\346\225\210\346\236\234.\345\216\237\345\206\254\346\242\205/\345\274\271\345\207\272\346\241\206\346\225\210\346\236\234.html"
diff --git "a/\345\216\237\345\206\254\346\242\205/css\346\225\210\346\236\234.\345\216\237\345\206\254\346\242\205/triangle.html" "b/\345\216\237\345\206\254\346\242\205/css\346\225\210\346\236\234.\345\216\237\345\206\254\346\242\205/triangle.html"
new file mode 100644
index 0000000..b897c75
--- /dev/null
+++ "b/\345\216\237\345\206\254\346\242\205/css\346\225\210\346\236\234.\345\216\237\345\206\254\346\242\205/triangle.html"
@@ -0,0 +1,92 @@
+<!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>
+        /* 显示框 */
+        .btn{
+            width: 100px;
+            line-height: 1.5;
+            padding: 5px 10px;
+            color: #ffffff;
+            background-color: red;
+            border-radius: 5px;
+            text-align: center;
+            cursor: pointer;
+            margin: 200px auto;
+            font-size: 20px;
+        }
+        /* 弹出框 */
+        :root{
+            /* 设置气泡背景 */
+            --poptipBg:rgba(255, 0, 0, 0.301);
+            /* 设置弹出框字体颜色 */
+            --color:#fff;
+            /* 设置弹出框三角形边长 */
+            --triangle:8px;
+            /* 设置弹出框与元素的偏移 */
+            --distance:-12px;
+        }
+        /* 设置弹出框弹出 */
+        .poptip1 {
+            position: relative;
+            z-index: 101;
+        }
+
+        .poptip1::before,
+        .poptip1::after {
+            visibility: hidden;
+            opacity: 0;
+            transform: translate3d(0, 0, 0);
+            transition: all 0.3s ease 0.2s;
+            box-sizing: border-box;
+        }
+
+        .poptip1::before {
+            content: "";
+            position: absolute;
+            width: 0;
+            height: 0;
+            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));
+        }
+
+        .poptip1::after {
+            /* 设置伪元素的宽度 */
+            text-align: left;
+            display:block;
+            width: 300px;
+            font-size: 14px;
+            color: var(--color);
+            /* 内容为标签内的属性值 */
+            content: attr(aria-controls);
+            position: absolute;
+            padding: 6px 12px;
+            white-space: wrap;
+            overflow:hidden;
+            z-index: -1;
+            left: 50%;
+            bottom: 100%;
+            transform: translateX(-50%) translateY(var(--distance));
+            background: var(--poptipBg);
+            line-height: 1;
+            border-radius: 2px;
+        }
+
+        .poptip1:hover::before,
+        .poptip1:hover::after {
+            visibility: visible;
+            opacity: 1;
+        }
+    </style>
+</head>
+<body>
+    <div class="poptip1 btn" aria-controls="易烊千玺，2000年11月28日生于湖南怀化，中国内地男演员、歌手、舞者，演唱组合TFBOYS成员，就读于中央戏剧学院。2005年，首登电视荧屏。2009年，加入飞炫少年组合。2013年，加入TFBOYS。">易烊千玺</div>
+</body>
+</html>
\ No newline at end of file
diff --git "a/\345\216\237\345\206\254\346\242\205/css\346\225\210\346\236\234.\345\216\237\345\206\254\346\242\205/\345\274\271\345\207\272\346\241\206\346\225\210\346\236\234.html" "b/\345\216\237\345\206\254\346\242\205/css\346\225\210\346\236\234.\345\216\237\345\206\254\346\242\205/\345\274\271\345\207\272\346\241\206\346\225\210\346\236\234.html"
new file mode 100644
index 0000000..669e965
--- /dev/null
+++ "b/\345\216\237\345\206\254\346\242\205/css\346\225\210\346\236\234.\345\216\237\345\206\254\346\242\205/\345\274\271\345\207\272\346\241\206\346\225\210\346\236\234.html"
@@ -0,0 +1,89 @@
+<!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;
+        }
+
+        .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: 0;
+            height: 0;
+            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 {
+            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">气泡提示</div>
+</body>
+
+</html>
\ No newline at end of file
-- 
Gitee

