Add example 54

zxuqian · Oct 27, 2024 · dd4fbff · dd4fbff
1 parent e766642
commit dd4fbff
Show file tree

Hide file tree

Showing 2 changed files with 419 additions and 188 deletions.
diff --git a/54-navbar-dark-bouncing/index.html b/54-navbar-dark-bouncing/index.html
@@ -0,0 +1,160 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>导航条带有跳跃动画</title>
+    <style>
+      body {
+        margin: 0;
+        padding: 0;
+        background-color: #1c1c1c;
+        font-family: Arial, "Ping Fang SC", "Microsoft Yahei", sans-serif;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        height: 100vh;
+      }
+
+      .navbar {
+        display: flex;
+        justify-content: space-around;
+        align-items: center;
+        background: linear-gradient(135deg, #2f2f2f, #454545);
+        width: 90%;
+        padding: 15px;
+        box-shadow: 0px 4px 12px rgba(0, 0, 0, 0.1);
+        position: relative;
+      }
+
+      .navbar a {
+        text-decoration: none;
+        color: white;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        font-size: 14px;
+        transition: color 0.3s;
+        position: relative;
+        z-index: 1;
+        flex: 1;
+      }
+
+      .navbar a .icon {
+        width: 36px;
+        height: 36px;
+        margin-bottom: 5px;
+        fill: white;
+        transition: fill 0.3s;
+      }
+
+      .navbar a.active {
+        color: #28a745;
+      }
+
+      .navbar a.active .icon {
+        fill: #28a745;
+        animation: bounce 0.6s;
+      }
+
+      @keyframes bounce {
+        0%,
+        20%,
+        50%,
+        80%,
+        100% {
+          transform: translateY(0);
+        }
+        40% {
+          transform: translateY(-10px);
+        }
+        60% {
+          transform: translateY(-5px);
+        }
+      }
+
+      .highlight {
+        position: absolute;
+        bottom: 0;
+        height: 4px;
+        background-color: #28a745;
+        width: calc(100% / 5);
+        transition: transform 0.5s ease, width 0.5s ease;
+        left: 0;
+      }
+    </style>
+  </head>
+  <body>
+    <div class="navbar">
+      <div class="highlight"></div>
+      <a href="#" class="active" onclick="setActive(this)">
+        <svg
+          class="icon"
+          xmlns="http://www.w3.org/2000/svg"
+          viewBox="0 0 24 24"
+        >
+          <path d="M10 20v-6h4v6h5v-8h3L12 3 2 12h3v8z" />
+        </svg>
+        主页
+      </a>
+      <a href="#" onclick="setActive(this)">
+        <svg
+          class="icon"
+          xmlns="http://www.w3.org/2000/svg"
+          viewBox="0 0 24 24"
+        >
+          <path
+            d="M19 3H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm-7 14H8v-2h4v2zm0-4H8v-2h4v2zm0-4H8V7h4v2zm6 8h-4v-2h4v2zm0-4h-4v-2h4v2zm0-4h-4V7h4v2z"
+          />
+        </svg>
+        文档
+      </a>
+      <a href="#" onclick="setActive(this)">
+        <svg
+          class="icon"
+          xmlns="http://www.w3.org/2000/svg"
+          viewBox="0 0 24 24"
+        >
+          <path d="M20 2H4v20h16V2zm-2 18H6V4h12v16z" />
+        </svg>
+        扫描
+      </a>
+      <a href="#" onclick="setActive(this)">
+        <svg
+          class="icon"
+          xmlns="http://www.w3.org/2000/svg"
+          viewBox="0 0 36 36"
+        >
+          <path
+            d="M18 3c-8.284 0-15 6.716-15 15s6.716 15 15 15 15-6.716 15-15S26.284 3 18 3zm0 4c6.075 0 11 4.925 11 11s-4.925 11-11 11S7 24.075 7 18 11.925 7 18 7zm-4 9v2h8v-2h-8zm0 4v2h8v-2h-8z"
+          />
+        </svg>
+        发现
+      </a>
+      <a href="#" onclick="setActive(this)">
+        <svg
+          class="icon"
+          xmlns="http://www.w3.org/2000/svg"
+          viewBox="0 0 24 24"
+        >
+          <path
+            d="M12 12c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm0 2c-2.67 0-8 1.34-8 4v2h16v-2c0-2.66-5.33-4-8-4z"
+          />
+        </svg>
+        我的
+      </a>
+    </div>
+
+    <script>
+      function setActive(element) {
+        const navbar = document.querySelector(".navbar");
+        const links = navbar.querySelectorAll("a");
+        links.forEach((link) => link.classList.remove("active"));
+        element.classList.add("active");
+        const index = Array.from(links).indexOf(element);
+        const highlight = document.querySelector(".highlight");
+        highlight.style.transform = `translateX(${index * 100}%)`;
+      }
+    </script>
+  </body>
+</html>