|
|
@@ -138,27 +138,20 @@ html, body {
|
|
|
background: transparent;
|
|
|
}
|
|
|
|
|
|
-.breathe-glow-text {
|
|
|
- /* 应用呼吸灯动画:3秒一个周期,缓入缓出,无限循环 */
|
|
|
- animation: breatheGlow 5s ease-in-out infinite;
|
|
|
-}
|
|
|
-/* 呼吸灯动画关键帧 */
|
|
|
-@keyframes breatheGlow {
|
|
|
- /* 0% 和 100% 是呼吸的最暗点:光晕收拢,微微变暗 */
|
|
|
- 0%, 100% {
|
|
|
- text-shadow:
|
|
|
- 0px 0px 2px var(--color, #00e5ff),
|
|
|
- 0px 0px 5px var(--color, #00e5ff),
|
|
|
- 0px 0px 10px var(--color, #00e5ff);
|
|
|
- opacity: 0.8;
|
|
|
- }
|
|
|
- /* 50% 是呼吸的最亮点:光晕扩散,完全高亮 */
|
|
|
- 50% {
|
|
|
- text-shadow:
|
|
|
- 0px 0px 5px var(--color, #00e5ff),
|
|
|
- 0px 0px 15px var(--color, #00e5ff),
|
|
|
- 0px 0px 30px var(--color, #00e5ff),
|
|
|
- 0px 0px 50px var(--color, #00e5ff);
|
|
|
- opacity: 1;
|
|
|
- }
|
|
|
+.glow-text {
|
|
|
+ position: relative;
|
|
|
+ color: #fff; /* 文字保持纯白 */
|
|
|
+}
|
|
|
+
|
|
|
+.glow-text::before {
|
|
|
+ content: attr(data-text);
|
|
|
+ position: absolute;
|
|
|
+ z-index: -1;
|
|
|
+
|
|
|
+ background: linear-gradient(45deg, #0033ff, #00aaff, #00ddff);
|
|
|
+ -webkit-background-clip: text;
|
|
|
+ color: transparent;
|
|
|
+
|
|
|
+ filter: blur(8px); /* 发光关键 */
|
|
|
+ opacity: 0.8;
|
|
|
}
|