模板:抖动/styles.css

/* ====== 通用：所有模式行内块 ====== */
.dk-translate, .dk-rotate, .dk-bounce, .dk-swing, .dk-jitter, .dk-pulse {
	display: inline-block;
}

/* ====== 平移（em，水平移动）====== */
.dk-translate { animation: dk-translate .5s infinite linear; }
@keyframes dk-translate {
	25% { transform: translate(calc(var(--dk-amp, .11em) * -1), 0); }
	75% { transform: translate(calc(var(--dk-amp, .11em) * 1), 0); }
}

/* ====== 旋转（deg）====== */
.dk-rotate { animation: dk-rotate .6s infinite ease-in-out; }
@keyframes dk-rotate {
	25% { transform: rotate(calc(var(--dk-angle, 9deg) * -1)); }
	75% { transform: rotate(calc(var(--dk-angle, 9deg) * 1)); }
}

/* ====== 跳动（em，向上）====== */
.dk-bounce { animation: dk-bounce .7s infinite ease-in-out; }
@keyframes dk-bounce { 50% { transform: translateY(calc(var(--dk-amp, -.17em) * 1)); } }

/* ====== 摇摆（deg，底部为支点）====== */
.dk-swing { transform-origin: 50% 100%; animation: dk-swing .8s infinite ease-in-out; }
@keyframes dk-swing {
	25% { transform: rotate(calc(var(--dk-angle, 9deg) * -1)); }
	75% { transform: rotate(calc(var(--dk-angle, 9deg) * 1)); }
}

/* ====== 颤抖（em + deg 联动）====== */
.dk-jitter { animation: dk-jitter .18s infinite linear; }
@keyframes dk-jitter {
	20% { transform: translate(calc(var(--dk-amp, .09em) * -1), calc(var(--dk-amp, .09em) * 1)) rotate(calc(var(--dk-angle, 6deg) * -1)); }
	40% { transform: translate(calc(var(--dk-amp, .09em) * 1), calc(var(--dk-amp, .09em) * -1)) rotate(calc(var(--dk-angle, 6deg) * 1)); }
	60% { transform: translate(calc(var(--dk-amp, .09em) * -1), calc(var(--dk-amp, .09em) * -1)) rotate(calc(var(--dk-angle, 6deg) * -1)); }
	80% { transform: translate(calc(var(--dk-amp, .09em) * 1), calc(var(--dk-amp, .09em) * 1)) rotate(calc(var(--dk-angle, 6deg) * 1)); }
}

/* ====== 缩放（倍数）====== */
.dk-pulse { animation: dk-pulse .8s infinite ease-in-out; }
@keyframes dk-pulse { 50% { transform: scale(calc(var(--dk-scale, 1.1) * 1)); } }

/* ====== 逐字模式 ====== */
.shake-chars { display: inline-block; }
.shake-char { display: inline-block; }
.shake-char:nth-child(3n+1) { animation-duration: .45s; }
.shake-char:nth-child(3n+2) { animation-duration: .55s; }
.shake-char:nth-child(3n+3) { animation-duration: .5s; }

@media (prefers-reduced-motion: reduce) {
	.dk-translate, .dk-rotate, .dk-bounce, .dk-swing, .dk-jitter, .dk-pulse { animation: none; }
}