瀏覽代碼

修改顶部标题的样式无边框

画安 3 周之前
父節點
當前提交
6176bdf8b6
共有 1 個文件被更改,包括 23 次插入18 次删除
  1. 23 18
      src/styles/base.css

+ 23 - 18
src/styles/base.css

@@ -138,20 +138,23 @@ html, body {
   background: transparent; 
 }
 
-/* ================= 文字主体:透明填充 + 轮廓描边呼吸 ================= */
+/* ================= 文字主体:纯发光(无边框) ================= */
 .glow-text {
   position: relative;
-  /* 内部掏空,露出底色 */
-  color: transparent; 
-  /* 基础轮廓线 */
-  -webkit-text-stroke: 1px rgba(0, 170, 255, 0.6); 
-  
-  animation: outlineBreathe 2.5s ease-in-out infinite; 
+
+  /* 渐变文字 */
+  background: linear-gradient(45deg, #0033ff, #00aaff, #00ddff);
+  -webkit-background-clip: text;
+  color: transparent;
+
+  animation: glowTextBreathe 2.5s ease-in-out infinite;
 }
 
+/* 背后扩散光 */
 .glow-text::before {
   content: attr(data-text);
   position: absolute;
+  inset: 0;
   z-index: -1;
 
   background: linear-gradient(45deg, #0033ff, #00aaff, #00ddff);
@@ -161,27 +164,29 @@ html, body {
   animation: glowBreathe 2.5s ease-in-out infinite;
 }
 
-/* 1. 轮廓呼吸动画:控制描边颜色和线条发光 */
-@keyframes outlineBreathe {
+/* 主体呼吸(控制亮度) */
+@keyframes glowTextBreathe {
   0%, 100% {
-    -webkit-text-stroke: 1px rgba(0, 170, 255, 0.4);
-    filter: drop-shadow(0 0 2px rgba(0, 170, 255, 0.3));
+    text-shadow:
+      0 0 4px rgba(0, 170, 255, 0.4),
+      0 0 8px rgba(0, 170, 255, 0.3);
   }
   50% {
-    /* 顶点时:线条变成极亮的高光青色 */
-    -webkit-text-stroke: 1px rgba(0, 255, 255, 1); 
-    filter: drop-shadow(0 0 10px rgba(0, 255, 255, 0.9)); 
+    text-shadow:
+      0 0 10px rgba(0, 255, 255, 0.9),
+      0 0 20px rgba(0, 255, 255, 0.7),
+      0 0 40px rgba(0, 255, 255, 0.5);
   }
 }
 
-/* 2. 背景光晕动画:控制模糊度、透明度和膨胀范围 */
+/* 背景光晕扩散 */
 @keyframes glowBreathe {
   0%, 100% {
     opacity: 0.2;
-    filter: blur(6px);
+    filter: blur(8px);
   }
   50% {
-    opacity: 0.5;
-    filter: blur(20px); 
+    opacity: 0.6;
+    filter: blur(24px);
   }
 }