提交

2026-02-12 09:38:27 +08:00
commit 5ba8456a88
42 changed files with 8372 additions and 0 deletions
@@ -0,0 +1,125 @@
+<!DOCTYPE html>
+<html lang="zh-CN">
+<head>
+<meta charset="UTF-8" />
+<title>Progress</title>
+<style>
+  body {
+    background:#0b0f14;
+    display:flex;
+    justify-content:center;
+    align-items:center;
+    height:100vh;
+  }
+
+  .progress-wrap {
+    width:680px;
+    height:30px;
+    padding:3px;
+    border-radius:20px;
+    background:linear-gradient(180deg,#ffb15a,#ff8c2a);
+    box-shadow:0 0 8px rgba(255,153,51,.6);
+  }
+
+  .progress-bg {
+    position:relative;
+    width:100%;
+    height:100%;
+    background:#1a1f26;
+    border-radius:16px;
+    overflow:hidden;
+  }
+
+  .progress-bar {
+    position:relative;
+    height:100%;
+    width:0%;
+    border-radius:16px;
+    background:
+      repeating-linear-gradient(
+        45deg,
+        rgba(255,255,255,.25) 0,
+        rgba(255,255,255,.25) 8px,
+        rgba(255,255,255,.12) 8px,
+        rgba(255,255,255,.12) 16px
+      ),
+      linear-gradient(180deg,#ffd27d,#ff8c2a);
+    animation:move 1.2s linear infinite;
+    box-shadow:inset 0 0 6px rgba(255,255,255,.6);
+  }
+
+  @keyframes move {
+    from { background-position:0 0; }
+    to   { background-position:40px 0; }
+  }
+
+  /* 箭头容器（圆形） */
+  .progress-info {
+    position:absolute;
+    right: 0px;
+    top:50%;
+    transform:translateY(-50%);
+    display:flex;
+    align-items:center;
+    gap:6px;
+    color:#fff;
+    font-size:13px;
+    font-weight:600;
+    white-space:nowrap;
+  }
+
+  .play-btn {
+    width: 24px;
+    height: 24px;
+    border-radius:50%;
+    background: #dc7439;
+    border: 2px solid #ffb521;
+    /* box-shadow:
+      0 0 6px rgba(255,170,60,.8),
+      inset 0 0 3px rgba(255,255,255,.9); */
+    display:flex;
+    align-items:center;
+    justify-content:center;
+  }
+
+  .play-btn::before {
+    content:"";
+    margin-left:2px;
+    width:0;
+    height:0;
+    border-top:5px solid transparent;
+    border-bottom:5px solid transparent;
+    border-left:7px solid #fff;
+  }
+</style>
+</head>
+<body>
+
+<div class="progress-wrap">
+  <div class="progress-bg">
+    <div class="progress-bar" id="bar">
+      <div class="progress-info">
+        <div class="play-btn"></div>
+      </div>
+    </div>
+  </div>
+</div>
+
+<script>
+  let value = 0;
+  const target = 77.05;
+  const bar = document.getElementById('bar');
+  const percent = document.getElementById('percent');
+
+  const timer = setInterval(() => {
+    value += 0.4;
+    if (value >= target) {
+      value = target;
+      clearInterval(timer);
+    }
+    bar.style.width = value + '%';
+  }, 20);
+</script>
+
+</body>
+</html>