Skip to content

Commit ac60b08

Browse files
authored
Update _coverpage.md
1 parent 28d7310 commit ac60b08

1 file changed

Lines changed: 60 additions & 1 deletion

File tree

_coverpage.md

Lines changed: 60 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -55,6 +55,65 @@
5555
}
5656
}
5757

58+
/* 5. 数字故障(Glitch)效果:针对主标题 */
59+
.cover h1 {
60+
position: relative;
61+
display: inline-block;
62+
animation: glitch-skew 4s infinite linear alternate-reverse;
63+
}
64+
65+
.cover h1::before,
66+
.cover h1::after {
67+
content: attr(data-text); /* 需要在 HTML 中配合 data-text 属性 */
68+
position: absolute;
69+
top: 0;
70+
left: 0;
71+
width: 100%;
72+
height: 100%;
73+
background: transparent;
74+
}
75+
76+
/* 红色偏移层 */
77+
.cover h1::before {
78+
left: 2px;
79+
text-shadow: -2px 0 #ff00c1;
80+
clip: rect(44px, 450px, 56px, 0);
81+
animation: glitch-anim 5s infinite linear alternate-reverse;
82+
}
83+
84+
/* 蓝色偏移层 */
85+
.cover h1::after {
86+
left: -2px;
87+
text-shadow: -2px 0 #00fff9;
88+
clip: rect(44px, 450px, 56px, 0);
89+
animation: glitch-anim2 5s infinite linear alternate-reverse;
90+
}
91+
92+
/* 故障位移轨迹 */
93+
@keyframes glitch-anim {
94+
0% { clip: rect(10px, 9999px, 33px, 0); }
95+
20% { clip: rect(62px, 9999px, 16px, 0); }
96+
40% { clip: rect(85px, 9999px, 98px, 0); }
97+
60% { clip: rect(57px, 9999px, 43px, 0); }
98+
80% { clip: rect(29px, 9999px, 71px, 0); }
99+
100% { clip: rect(94px, 9999px, 2px, 0); }
100+
}
101+
102+
@keyframes glitch-anim2 {
103+
0% { clip: rect(25px, 9999px, 58px, 0); }
104+
20% { clip: rect(54px, 9999px, 7px, 0); }
105+
40% { clip: rect(12px, 9999px, 91px, 0); }
106+
60% { clip: rect(74px, 9999px, 56px, 0); }
107+
80% { clip: rect(43px, 9999px, 12px, 0); }
108+
100% { clip: rect(67px, 9999px, 88px, 0); }
109+
}
110+
111+
@keyframes glitch-skew {
112+
0% { transform: skew(1deg); }
113+
10% { transform: skew(-1deg); }
114+
100% { transform: skew(0deg); }
115+
}
116+
58117
/* 可选:为标题增加淡淡的呼吸灯效果 */
59118
.cover h1, .cover h2 {
60119
animation: titlePulse 4s ease-in-out infinite;
@@ -65,7 +124,7 @@
65124
}
66125
</style>
67126

68-
# Renegade AI <vec />
127+
# <span class="glitch" data-text="Renegade AI">Renegade AI</span>
69128
## 叛逆 AI:人类认知进化的催化剂 <small>v4.2</small>
70129

71130
> **"The silicon Other has arrived. The audit of human consensus begins now."**

0 commit comments

Comments
 (0)