模板:续标识/styles.css

/* ===== 外层容器（处理重复与缩放） ===== */
.xz-outer {
	display: inline-block;
	white-space: nowrap;
}

/* ===== 容器 ===== */
.xz-wrap {
	position: relative;
	display: inline-block;
	width: 1.14em;
	height: 1.5em;
	vertical-align: middle;
}

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

/* ===== 1. 长矩形（圆柱主体，最底层，下沉） ===== */
.xz-btn-rect {
	left: 0.20em;
	top: 0.94em;
	width: 0.74em;
	height: 0.30em;
	background: #EE2222;
	animation: xz-press 0.2s ease-in-out infinite;
}

/* ===== 2. 底座椭圆（浅灰，静止） ===== */
.xz-base {
	left: 0.04em;
	top: 1.02em;
	width: 1.06em;
	height: 0.44em;
	background: #DDDDDD;
	border-radius: 50%;
}

/* ===== 3. 短矩形（连接柱，高度缩至 50%，底部不变，静止） ===== */
.xz-connector {
	left: 0.20em;
	top: 1.13em;
	width: 0.74em;
	height: 0.11em;
	background: #EE2222;
}

/* ===== 4. 按钮下半椭圆（静止） ===== */
.xz-btn-bottom {
	left: 0.20em;
	top: 1.07em;
	width: 0.74em;
	height: 0.34em;
	background: #EE2222;
	border-radius: 50%;
}

/* ===== 5. 按钮上半椭圆（白边，下沉） ===== */
.xz-btn-top {
	left: 0.20em;
	top: 0.77em;
	width: 0.74em;
	height: 0.34em;
	background: #EE2222;
	border: 1px solid #FFFFFF;
	border-radius: 50%;
	animation: xz-press 0.2s ease-in-out infinite;
}

/* ===== 6. 手指（☚ 逆时针旋转 90°，下移 0.1em） ===== */
.xz-finger {
	left: 0.19em;
	top: 0.14em;
	width: 0.76em;
	height: 0.76em;
	line-height: 0.76em;
	text-align: center;
	font-size: 0.76em;
	color: #FFCCAA;
	text-shadow: 0 0 0.05em rgba(0, 0, 0, 0.3);
	animation: xz-finger-press 0.2s ease-in-out infinite;
}

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

/* ===== 按压动画（周期 0.2s） ===== */
@keyframes xz-press {
	0%, 15%   { transform: translateY(0); }
	45%, 55%  { transform: translateY(0.1em); }
	85%, 100% { transform: translateY(0); }
}

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

/* ===== 无障碍：减少动态效果 ===== */
@media (prefers-reduced-motion: reduce) {
	.xz-btn-top, .xz-btn-rect, .xz-finger { animation: none; }
}