模板:抖动/styles.css

/* ====== 通用：所有档位行内块 ====== */
.dk-translate-1, .dk-translate-2, .dk-translate-3, .dk-translate-4, .dk-translate-5,
.dk-translate-6, .dk-translate-7, .dk-translate-8, .dk-translate-9, .dk-translate-10,
.dk-rotate-1, .dk-rotate-2, .dk-rotate-3, .dk-rotate-4, .dk-rotate-5,
.dk-rotate-6, .dk-rotate-7, .dk-rotate-8, .dk-rotate-9, .dk-rotate-10,
.dk-bounce-1, .dk-bounce-2, .dk-bounce-3, .dk-bounce-4, .dk-bounce-5,
.dk-bounce-6, .dk-bounce-7, .dk-bounce-8, .dk-bounce-9, .dk-bounce-10,
.dk-swing-1, .dk-swing-2, .dk-swing-3, .dk-swing-4, .dk-swing-5,
.dk-swing-6, .dk-swing-7, .dk-swing-8, .dk-swing-9, .dk-swing-10,
.dk-jitter-1, .dk-jitter-2, .dk-jitter-3, .dk-jitter-4, .dk-jitter-5,
.dk-jitter-6, .dk-jitter-7, .dk-jitter-8, .dk-jitter-9, .dk-jitter-10,
.dk-pulse-1, .dk-pulse-2, .dk-pulse-3, .dk-pulse-4, .dk-pulse-5,
.dk-pulse-6, .dk-pulse-7, .dk-pulse-8, .dk-pulse-9, .dk-pulse-10 {
	display: inline-block;
}

/* ====== 平移（em，水平移动）====== */
.dk-translate-1 { animation: dk-translate-1 .5s infinite linear; }
.dk-translate-2 { animation: dk-translate-2 .5s infinite linear; }
.dk-translate-3 { animation: dk-translate-3 .5s infinite linear; }
.dk-translate-4 { animation: dk-translate-4 .5s infinite linear; }
.dk-translate-5 { animation: dk-translate-5 .5s infinite linear; }
.dk-translate-6 { animation: dk-translate-6 .5s infinite linear; }
.dk-translate-7 { animation: dk-translate-7 .5s infinite linear; }
.dk-translate-8 { animation: dk-translate-8 .5s infinite linear; }
.dk-translate-9 { animation: dk-translate-9 .5s infinite linear; }
.dk-translate-10 { animation: dk-translate-10 .5s infinite linear; }
@keyframes dk-translate-1 { 25% { transform: translate(-0.02em, 0); } 75% { transform: translate(0.02em, 0); } }
@keyframes dk-translate-2 { 25% { transform: translate(-0.035em, 0); } 75% { transform: translate(0.035em, 0); } }
@keyframes dk-translate-3 { 25% { transform: translate(-0.05em, 0); } 75% { transform: translate(0.05em, 0); } }
@keyframes dk-translate-4 { 25% { transform: translate(-0.075em, 0); } 75% { transform: translate(0.075em, 0); } }
@keyframes dk-translate-5 { 25% { transform: translate(-0.11em, 0); } 75% { transform: translate(0.11em, 0); } }
@keyframes dk-translate-6 { 25% { transform: translate(-0.15em, 0); } 75% { transform: translate(0.15em, 0); } }
@keyframes dk-translate-7 { 25% { transform: translate(-0.2em, 0); } 75% { transform: translate(0.2em, 0); } }
@keyframes dk-translate-8 { 25% { transform: translate(-0.28em, 0); } 75% { transform: translate(0.28em, 0); } }
@keyframes dk-translate-9 { 25% { transform: translate(-0.38em, 0); } 75% { transform: translate(0.38em, 0); } }
@keyframes dk-translate-10 { 25% { transform: translate(-0.5em, 0); } 75% { transform: translate(0.5em, 0); } }

/* ====== 旋转（deg）====== */
.dk-rotate-1 { animation: dk-rotate-1 .6s infinite ease-in-out; }
.dk-rotate-2 { animation: dk-rotate-2 .6s infinite ease-in-out; }
.dk-rotate-3 { animation: dk-rotate-3 .6s infinite ease-in-out; }
.dk-rotate-4 { animation: dk-rotate-4 .6s infinite ease-in-out; }
.dk-rotate-5 { animation: dk-rotate-5 .6s infinite ease-in-out; }
.dk-rotate-6 { animation: dk-rotate-6 .6s infinite ease-in-out; }
.dk-rotate-7 { animation: dk-rotate-7 .6s infinite ease-in-out; }
.dk-rotate-8 { animation: dk-rotate-8 .6s infinite ease-in-out; }
.dk-rotate-9 { animation: dk-rotate-9 .6s infinite ease-in-out; }
.dk-rotate-10 { animation: dk-rotate-10 .6s infinite ease-in-out; }
@keyframes dk-rotate-1 { 25% { transform: rotate(-1.5deg); } 75% { transform: rotate(1.5deg); } }
@keyframes dk-rotate-2 { 25% { transform: rotate(-3deg); } 75% { transform: rotate(3deg); } }
@keyframes dk-rotate-3 { 25% { transform: rotate(-4.5deg); } 75% { transform: rotate(4.5deg); } }
@keyframes dk-rotate-4 { 25% { transform: rotate(-6.5deg); } 75% { transform: rotate(6.5deg); } }
@keyframes dk-rotate-5 { 25% { transform: rotate(-9deg); } 75% { transform: rotate(9deg); } }
@keyframes dk-rotate-6 { 25% { transform: rotate(-12deg); } 75% { transform: rotate(12deg); } }
@keyframes dk-rotate-7 { 25% { transform: rotate(-16deg); } 75% { transform: rotate(16deg); } }
@keyframes dk-rotate-8 { 25% { transform: rotate(-21deg); } 75% { transform: rotate(21deg); } }
@keyframes dk-rotate-9 { 25% { transform: rotate(-27deg); } 75% { transform: rotate(27deg); } }
@keyframes dk-rotate-10 { 25% { transform: rotate(-35deg); } 75% { transform: rotate(35deg); } }

/* ====== 跳动（em，上下移动）====== */
.dk-bounce-1 { animation: dk-bounce-1 .7s infinite ease-in-out; }
.dk-bounce-2 { animation: dk-bounce-2 .7s infinite ease-in-out; }
.dk-bounce-3 { animation: dk-bounce-3 .7s infinite ease-in-out; }
.dk-bounce-4 { animation: dk-bounce-4 .7s infinite ease-in-out; }
.dk-bounce-5 { animation: dk-bounce-5 .7s infinite ease-in-out; }
.dk-bounce-6 { animation: dk-bounce-6 .7s infinite ease-in-out; }
.dk-bounce-7 { animation: dk-bounce-7 .7s infinite ease-in-out; }
.dk-bounce-8 { animation: dk-bounce-8 .7s infinite ease-in-out; }
.dk-bounce-9 { animation: dk-bounce-9 .7s infinite ease-in-out; }
.dk-bounce-10 { animation: dk-bounce-10 .7s infinite ease-in-out; }
@keyframes dk-bounce-1 { 50% { transform: translateY(-0.03em); } }
@keyframes dk-bounce-2 { 50% { transform: translateY(-0.05em); } }
@keyframes dk-bounce-3 { 50% { transform: translateY(-0.08em); } }
@keyframes dk-bounce-4 { 50% { transform: translateY(-0.12em); } }
@keyframes dk-bounce-5 { 50% { transform: translateY(-0.17em); } }
@keyframes dk-bounce-6 { 50% { transform: translateY(-0.23em); } }
@keyframes dk-bounce-7 { 50% { transform: translateY(-0.3em); } }
@keyframes dk-bounce-8 { 50% { transform: translateY(-0.4em); } }
@keyframes dk-bounce-9 { 50% { transform: translateY(-0.55em); } }
@keyframes dk-bounce-10 { 50% { transform: translateY(-0.75em); } }

/* ====== 摇摆（deg，底部为支点）====== */
.dk-swing-1, .dk-swing-2, .dk-swing-3, .dk-swing-4, .dk-swing-5,
.dk-swing-6, .dk-swing-7, .dk-swing-8, .dk-swing-9, .dk-swing-10 { transform-origin: 50% 100%; }
.dk-swing-1 { animation: dk-swing-1 .8s infinite ease-in-out; }
.dk-swing-2 { animation: dk-swing-2 .8s infinite ease-in-out; }
.dk-swing-3 { animation: dk-swing-3 .8s infinite ease-in-out; }
.dk-swing-4 { animation: dk-swing-4 .8s infinite ease-in-out; }
.dk-swing-5 { animation: dk-swing-5 .8s infinite ease-in-out; }
.dk-swing-6 { animation: dk-swing-6 .8s infinite ease-in-out; }
.dk-swing-7 { animation: dk-swing-7 .8s infinite ease-in-out; }
.dk-swing-8 { animation: dk-swing-8 .8s infinite ease-in-out; }
.dk-swing-9 { animation: dk-swing-9 .8s infinite ease-in-out; }
.dk-swing-10 { animation: dk-swing-10 .8s infinite ease-in-out; }
@keyframes dk-swing-1 { 25% { transform: rotate(-1.5deg); } 75% { transform: rotate(1.5deg); } }
@keyframes dk-swing-2 { 25% { transform: rotate(-3deg); } 75% { transform: rotate(3deg); } }
@keyframes dk-swing-3 { 25% { transform: rotate(-4.5deg); } 75% { transform: rotate(4.5deg); } }
@keyframes dk-swing-4 { 25% { transform: rotate(-6.5deg); } 75% { transform: rotate(6.5deg); } }
@keyframes dk-swing-5 { 25% { transform: rotate(-9deg); } 75% { transform: rotate(9deg); } }
@keyframes dk-swing-6 { 25% { transform: rotate(-12deg); } 75% { transform: rotate(12deg); } }
@keyframes dk-swing-7 { 25% { transform: rotate(-16deg); } 75% { transform: rotate(16deg); } }
@keyframes dk-swing-8 { 25% { transform: rotate(-21deg); } 75% { transform: rotate(21deg); } }
@keyframes dk-swing-9 { 25% { transform: rotate(-27deg); } 75% { transform: rotate(27deg); } }
@keyframes dk-swing-10 { 25% { transform: rotate(-35deg); } 75% { transform: rotate(35deg); } }

/* ====== 颤抖（em + deg 联动）====== */
.dk-jitter-1 { animation: dk-jitter-1 .18s infinite linear; }
.dk-jitter-2 { animation: dk-jitter-2 .18s infinite linear; }
.dk-jitter-3 { animation: dk-jitter-3 .18s infinite linear; }
.dk-jitter-4 { animation: dk-jitter-4 .18s infinite linear; }
.dk-jitter-5 { animation: dk-jitter-5 .18s infinite linear; }
.dk-jitter-6 { animation: dk-jitter-6 .18s infinite linear; }
.dk-jitter-7 { animation: dk-jitter-7 .18s infinite linear; }
.dk-jitter-8 { animation: dk-jitter-8 .18s infinite linear; }
.dk-jitter-9 { animation: dk-jitter-9 .18s infinite linear; }
.dk-jitter-10 { animation: dk-jitter-10 .18s infinite linear; }
@keyframes dk-jitter-1 {
	20% { transform: translate(-0.015em, 0.015em) rotate(-0.8deg); }
	40% { transform: translate(0.015em, -0.015em) rotate(0.8deg); }
	60% { transform: translate(-0.015em, -0.015em) rotate(-0.8deg); }
	80% { transform: translate(0.015em, 0.015em) rotate(0.8deg); }
}
@keyframes dk-jitter-2 {
	20% { transform: translate(-0.025em, 0.025em) rotate(-1.5deg); }
	40% { transform: translate(0.025em, -0.025em) rotate(1.5deg); }
	60% { transform: translate(-0.025em, -0.025em) rotate(-1.5deg); }
	80% { transform: translate(0.025em, 0.025em) rotate(1.5deg); }
}
@keyframes dk-jitter-3 {
	20% { transform: translate(-0.04em, 0.04em) rotate(-2.5deg); }
	40% { transform: translate(0.04em, -0.04em) rotate(2.5deg); }
	60% { transform: translate(-0.04em, -0.04em) rotate(-2.5deg); }
	80% { transform: translate(0.04em, 0.04em) rotate(2.5deg); }
}
@keyframes dk-jitter-4 {
	20% { transform: translate(-0.06em, 0.06em) rotate(-4deg); }
	40% { transform: translate(0.06em, -0.06em) rotate(4deg); }
	60% { transform: translate(-0.06em, -0.06em) rotate(-4deg); }
	80% { transform: translate(0.06em, 0.06em) rotate(4deg); }
}
@keyframes dk-jitter-5 {
	20% { transform: translate(-0.09em, 0.09em) rotate(-6deg); }
	40% { transform: translate(0.09em, -0.09em) rotate(6deg); }
	60% { transform: translate(-0.09em, -0.09em) rotate(-6deg); }
	80% { transform: translate(0.09em, 0.09em) rotate(6deg); }
}
@keyframes dk-jitter-6 {
	20% { transform: translate(-0.12em, 0.12em) rotate(-8deg); }
	40% { transform: translate(0.12em, -0.12em) rotate(8deg); }
	60% { transform: translate(-0.12em, -0.12em) rotate(-8deg); }
	80% { transform: translate(0.12em, 0.12em) rotate(8deg); }
}
@keyframes dk-jitter-7 {
	20% { transform: translate(-0.16em, 0.16em) rotate(-11deg); }
	40% { transform: translate(0.16em, -0.16em) rotate(11deg); }
	60% { transform: translate(-0.16em, -0.16em) rotate(-11deg); }
	80% { transform: translate(0.16em, 0.16em) rotate(11deg); }
}
@keyframes dk-jitter-8 {
	20% { transform: translate(-0.22em, 0.22em) rotate(-15deg); }
	40% { transform: translate(0.22em, -0.22em) rotate(15deg); }
	60% { transform: translate(-0.22em, -0.22em) rotate(-15deg); }
	80% { transform: translate(0.22em, 0.22em) rotate(15deg); }
}
@keyframes dk-jitter-9 {
	20% { transform: translate(-0.3em, 0.3em) rotate(-20deg); }
	40% { transform: translate(0.3em, -0.3em) rotate(20deg); }
	60% { transform: translate(-0.3em, -0.3em) rotate(-20deg); }
	80% { transform: translate(0.3em, 0.3em) rotate(20deg); }
}
@keyframes dk-jitter-10 {
	20% { transform: translate(-0.4em, 0.4em) rotate(-27deg); }
	40% { transform: translate(0.4em, -0.4em) rotate(27deg); }
	60% { transform: translate(-0.4em, -0.4em) rotate(-27deg); }
	80% { transform: translate(0.4em, 0.4em) rotate(27deg); }
}

/* ====== 缩放（倍数）====== */
.dk-pulse-1 { animation: dk-pulse-1 .8s infinite ease-in-out; }
.dk-pulse-2 { animation: dk-pulse-2 .8s infinite ease-in-out; }
.dk-pulse-3 { animation: dk-pulse-3 .8s infinite ease-in-out; }
.dk-pulse-4 { animation: dk-pulse-4 .8s infinite ease-in-out; }
.dk-pulse-5 { animation: dk-pulse-5 .8s infinite ease-in-out; }
.dk-pulse-6 { animation: dk-pulse-6 .8s infinite ease-in-out; }
.dk-pulse-7 { animation: dk-pulse-7 .8s infinite ease-in-out; }
.dk-pulse-8 { animation: dk-pulse-8 .8s infinite ease-in-out; }
.dk-pulse-9 { animation: dk-pulse-9 .8s infinite ease-in-out; }
.dk-pulse-10 { animation: dk-pulse-10 .8s infinite ease-in-out; }
@keyframes dk-pulse-1 { 50% { transform: scale(1.02); } }
@keyframes dk-pulse-2 { 50% { transform: scale(1.035); } }
@keyframes dk-pulse-3 { 50% { transform: scale(1.05); } }
@keyframes dk-pulse-4 { 50% { transform: scale(1.07); } }
@keyframes dk-pulse-5 { 50% { transform: scale(1.1); } }
@keyframes dk-pulse-6 { 50% { transform: scale(1.14); } }
@keyframes dk-pulse-7 { 50% { transform: scale(1.18); } }
@keyframes dk-pulse-8 { 50% { transform: scale(1.24); } }
@keyframes dk-pulse-9 { 50% { transform: scale(1.3); } }
@keyframes dk-pulse-10 { 50% { transform: scale(1.38); } }

/* ====== 逐字模式 ====== */
.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-1, .dk-translate-2, .dk-translate-3, .dk-translate-4, .dk-translate-5,
	.dk-translate-6, .dk-translate-7, .dk-translate-8, .dk-translate-9, .dk-translate-10,
	.dk-rotate-1, .dk-rotate-2, .dk-rotate-3, .dk-rotate-4, .dk-rotate-5,
	.dk-rotate-6, .dk-rotate-7, .dk-rotate-8, .dk-rotate-9, .dk-rotate-10,
	.dk-bounce-1, .dk-bounce-2, .dk-bounce-3, .dk-bounce-4, .dk-bounce-5,
	.dk-bounce-6, .dk-bounce-7, .dk-bounce-8, .dk-bounce-9, .dk-bounce-10,
	.dk-swing-1, .dk-swing-2, .dk-swing-3, .dk-swing-4, .dk-swing-5,
	.dk-swing-6, .dk-swing-7, .dk-swing-8, .dk-swing-9, .dk-swing-10,
	.dk-jitter-1, .dk-jitter-2, .dk-jitter-3, .dk-jitter-4, .dk-jitter-5,
	.dk-jitter-6, .dk-jitter-7, .dk-jitter-8, .dk-jitter-9, .dk-jitter-10,
	.dk-pulse-1, .dk-pulse-2, .dk-pulse-3, .dk-pulse-4, .dk-pulse-5,
	.dk-pulse-6, .dk-pulse-7, .dk-pulse-8, .dk-pulse-9, .dk-pulse-10 { animation: none; }
}