模板:续标识/styles.css

/* ===== 容器：内容 + 上下各 2px = 1.5em ===== */
.xz-wrap {
	position: relative;
	display: inline-block;
	width: 1.4286em;
	height: 1.5em;
	vertical-align: middle;
}

.xz-wrap > span {
	position: absolute;
	display: block;
	box-sizing: border-box;
}

.xz-btn-rect {
	left: 0.2619em;
	top: 0.9286em;
	width: 0.9286em;
	height: 0.3571em;
	background: #EE2222;
	animation: xz-press 0.2s ease-in-out infinite;
}

.xz-base {
	left: 0.0476em;
	top: 1.1190em;
	width: 1.3333em;
	height: 0.3333em;
	background: #DDDDDD;
	border-radius: 50%;
}

.xz-connector {
	left: 0.2619em;
	top: 1.1190em;
	width: 0.9286em;
	height: 0.1667em;
	background: #EE2222;
}

.xz-btn-bottom {
	left: 0.2619em;
	top: 1.1667em;
	width: 0.9286em;
	height: 0.2143em;
	background: #EE2222;
	border-radius: 50%;
}

.xz-btn-top {
	left: 0.2619em;
	top: 0.8095em;
	width: 0.9286em;
	height: 0.2143em;
	background: #EE2222;
	border: 1px solid #FFFFFF;
	border-radius: 50%;
	animation: xz-press 0.2s ease-in-out infinite;
}

.xz-finger {
	left: 0.4524em;
	top: 0.2143em;
	width: 0.7857em;
	height: 0.7857em;
	line-height: 0.7857em;
	text-align: center;
	font-size: 0.7857em;
	color: #FFCCAA;
	animation: xz-finger-press 0.2s ease-in-out infinite;
}

.xz-finger-inner {
	display: inline-block;
	transform: rotate(-90deg);
}

@keyframes xz-press {
	0%, 15%   { transform: translateY(0); }
	45%, 55%  { transform: translateY(0.0952em); }
	85%, 100% { transform: translateY(0); }
}

@keyframes xz-finger-press {
	0%, 15%   { transform: translateY(0); }
	45%, 55%  { transform: translateY(0.2381em); }
	85%, 100% { transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
	.xz-btn-top, .xz-btn-rect, .xz-finger { animation: none; }
}