瀏覽代碼

修改顶部标题的发光呼吸动效样式

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

+ 33 - 3
src/styles/base.css

@@ -138,9 +138,15 @@ html, body {
   background: transparent; 
 }
 
+/* ================= 文字主体:透明填充 + 轮廓描边呼吸 ================= */
 .glow-text {
   position: relative;
-  color: #fff; /* 文字保持纯白 */
+  /* 内部掏空,露出底色 */
+  color: transparent; 
+  /* 基础轮廓线 */
+  -webkit-text-stroke: 1px rgba(0, 170, 255, 0.6); 
+  
+  animation: outlineBreathe 2.5s ease-in-out infinite; 
 }
 
 .glow-text::before {
@@ -152,6 +158,30 @@ html, body {
   -webkit-background-clip: text;
   color: transparent;
 
-  filter: blur(8px); /* 发光关键 */
-  opacity: 0.8;
+  animation: glowBreathe 2.5s ease-in-out infinite;
+}
+
+/* 1. 轮廓呼吸动画:控制描边颜色和线条发光 */
+@keyframes outlineBreathe {
+  0%, 100% {
+    -webkit-text-stroke: 1px rgba(0, 170, 255, 0.4);
+    filter: drop-shadow(0 0 2px 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)); 
+  }
+}
+
+/* 2. 背景光晕动画:控制模糊度、透明度和膨胀范围 */
+@keyframes glowBreathe {
+  0%, 100% {
+    opacity: 0.2;
+    filter: blur(6px);
+  }
+  50% {
+    opacity: 0.5;
+    filter: blur(20px); 
+  }
 }