|
|
@@ -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);
|
|
|
+ }
|
|
|
}
|