模板:续标识/styles.css - 版本历史

2026年10月23日 (五) 08:34 Anteove

2026-10-23T08:34:20Z

←上一版本		2026年10月23日 (五) 16:34的版本
第40行：		第40行：
	}		}

	/* ===== 3. ~~短矩形（连接柱，高度放大到 1.2 倍，底部不变，静止）~~ ===== */		/* ===== 3. 短矩形（连接柱，静止） ===== */
	.xz-connector {		.xz-connector {
	left: 0.20em;		left: 0.20em;
第71行：		第71行：
	}		}

	/* ===== 6. 手指（☚ 逆时针旋转 ~~90°，下移 0.1em）~~ ===== */		/* ===== 6. 手指（☚ 逆时针旋转 90°，水平居中） ===== */
	.xz-finger {		.xz-finger {
	left: 0.~~4em~~;		left: 0.19em;
	top: 0.14em;		top: 0.14em;
	width: 0.76em;		width: 0.76em;

2026年10月23日 (五) 08:29 Anteove

2026-10-23T08:29:27Z

←上一版本		2026年10月23日 (五) 16:29的版本
第73行：		第73行：
	/* ===== 6. 手指（☚ 逆时针旋转 90°，下移 0.1em） ===== */		/* ===== 6. 手指（☚ 逆时针旋转 90°，下移 0.1em） ===== */
	.xz-finger {		.xz-finger {
	left: 0.~~19em~~;		left: 0.4em;
	top: 0.14em;		top: 0.14em;
	width: 0.76em;		width: 0.76em;

2026年10月13日 (二) 08:47 AtomTheory

2026-10-13T08:47:29Z

←上一版本		2026年10月13日 (二) 16:47的版本
第40行：		第40行：
	}		}

	/* ===== 3. ~~短矩形（连接柱，高度缩至 50%，底部不变，静止）~~ ===== */		/* ===== 3. 短矩形（连接柱，高度放大到 1.2 倍，底部不变，静止） ===== */
	.xz-connector {		.xz-connector {
	left: 0.20em;		left: 0.20em;
	top: 1.~~13em~~;		top: 1.042em;
	width: 0.74em;		width: 0.74em;
	height: 0.~~11em~~;		height: 0.198em;
	background: #EE2222;		background: #EE2222;
	}		}

2026年10月13日 (二) 08:45 AtomTheory

2026-10-13T08:45:26Z

←上一版本		2026年10月13日 (二) 16:45的版本
第1行：		第1行：
	/* ===== ~~容器：内容 + 上下各 2px~~ = 1.~~5em~~ ===== */		/* ===== 外层容器（处理重复与缩放） ===== */
			.xz-outer {
			display: inline-block;
			white-space: nowrap;
			}

			/* ===== 容器 ===== */
	.xz-wrap {		.xz-wrap {
	position: relative;		position: relative;
	display: inline-block;		display: inline-block;
	width: 1.~~4286em~~;		width: 1.14em;
	height: 1.5em;		height: 1.5em;
	vertical-align: middle;		vertical-align: middle;
第14行：		第20行：
	}		}

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

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

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

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

			/* ===== 5. 按钮上半椭圆（白边，下沉） ===== */
	.xz-btn-top {		.xz-btn-top {
	left: 0.~~2619em~~;		left: 0.20em;
	top: 0.~~8095em~~;		top: 0.77em;
	width: 0.~~9286em~~;		width: 0.74em;
	height: 0.~~2143em~~;		height: 0.34em;
	background: #EE2222;		background: #EE2222;
	border: 1px solid #FFFFFF;		border: 1px solid #FFFFFF;
第60行：		第71行：
	}		}

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

			/* ===== 按压动画（周期 0.2s） ===== */
	@keyframes xz-press {		@keyframes xz-press {
	0%, 15% { transform: translateY(0); }		0%, 15% { transform: translateY(0); }
	45%, 55% { transform: translateY(0.~~0952em~~); }		45%, 55% { transform: translateY(0.1em); }
	85%, 100% { transform: translateY(0); }		85%, 100% { transform: translateY(0); }
	}		}
第85行：		第99行：
	@keyframes xz-finger-press {		@keyframes xz-finger-press {
	0%, 15% { transform: translateY(0); }		0%, 15% { transform: translateY(0); }
	45%, 55% { transform: translateY(0.~~2381em~~); }		45%, 55% { transform: translateY(0.48em); }
	85%, 100% { transform: translateY(0); }		85%, 100% { transform: translateY(0); }
	}		}

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

Anteove：创建页面，内容为“/* ===== 容器：内容 + 上下各 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; wi…”

2026-10-09T12:47:17Z

创建页面，内容为“===== 容器：内容 + 上下各 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; wi…”

新页面

/* ===== 容器：内容 + 上下各 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; }
}