Kinetic Typography
文字本身具有运动效果（位移、旋转、逐字渐显等），用以增强信息传递的情感和节奏感。动态文字让静态内容变得生动有力。
/* 逐字渐显 */
.reveal-text span {
display: inline-block;
opacity: 0;
transform: translateY(50px) rotate(10deg);
animation: revealChar 0.6s forwards;
}
/* 乱码解码效果 */
const chars = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ';
let iterations = 0;
const interval = setInterval(() => {
el.innerText = el.innerText.split('').map((l,i) => {
if(i < iterations) return el.dataset.value[i];
return chars[Math.floor(Math.random() * 26)];
}).join('');
if(iterations >= el.dataset.value.length) clearInterval(interval);
iterations += 1/3;
}, 30);
← 返回索引