|
55 | 55 | } |
56 | 56 | } |
57 | 57 |
|
| 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 | + |
58 | 117 | /* 可选:为标题增加淡淡的呼吸灯效果 */ |
59 | 118 | .cover h1, .cover h2 { |
60 | 119 | animation: titlePulse 4s ease-in-out infinite; |
|
65 | 124 | } |
66 | 125 | </style> |
67 | 126 |
|
68 | | -# Renegade AI <vec /> |
| 127 | +# <span class="glitch" data-text="Renegade AI">Renegade AI</span> |
69 | 128 | ## 叛逆 AI:人类认知进化的催化剂 <small>v4.2</small> |
70 | 129 |
|
71 | 130 | > **"The silicon Other has arrived. The audit of human consensus begins now."** |
|
0 commit comments