.font-effect {
	font-family: "微软雅黑", "PingFang SC", "Helvetica Neue", sans-serif;
	font-size: 46px;
	font-weight: bold;
	text-align: center;
}

/* 1. 渐变文字效果 */
.gradient-text {
	/* 定义渐变颜色 */
	background-image: linear-gradient(45deg, #ff0080, #ff8c00, #40e0d0);
	/* 将渐变应用到文字上（核心属性） */
	-webkit-background-clip: text;
	background-clip: text;
	/* 隐藏原文字颜色，只显示渐变 */
	color: transparent;
}

/* 2. 3D立体文字效果 */
.3d-text {
	color: #fff;
	/* 多层text-shadow叠加，营造立体层次感 */
	text-shadow: 
		1px 1px #000,
		2px 2px #000,
		3px 3px #000,
		4px 4px #000,
		5px 5px #000,
		6px 6px 10px rgba(0, 0, 0, 0.8);
	/* 轻微倾斜增强立体视觉 */
	transform: skew(-5deg);
}

/* 3. 霓虹闪烁文字效果 */
.neon-text {
	color: #fff;
	/* 霓虹光晕效果 */
	text-shadow: 
		0 0 6px #f829ff,
		0 0 8px #c821cd,
		0 0 10px #821586,
		0 0 12px #8f00d7,
		0 0 16px #51007a;
	/* 闪烁动画 */
	animation: neon-blink 6s infinite alternate;
}
@keyframes neon-blink {
	from { opacity: 1; }
	to { opacity: 0.7; text-shadow: 0 0 2px #005f5f, 0 0 5px #120a7e, 0 0 10px #0b0133; }
}

/* 4. 描边镂空文字效果 */
.stroke-text {
	color: transparent;
	/* 文字描边（核心属性，webkit内核兼容） */
	-webkit-text-stroke: 2px #ff2d95;
	text-stroke: 2px #ff2d95;
	/* 轻微阴影增强层次感 */
	text-shadow: 0 0 5px rgba(255, 45, 149, 0.5);
}

/* 5. 动态光影文字效果 */
.moving-light-text {
	background-image: linear-gradient(90deg, #ff0000, #ffff00, #00ff00, #00ffff, #0000ff, #ff00ff, #ff0000);
	background-size: 200% 100%;
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
	/* 光影移动动画 */
	animation: light-move 3s linear infinite;
}
@keyframes light-move {
	0% { background-position: 0 0; }
	100% { background-position: 200% 0; }
}

/* 6. 金属质感文字效果 */
.metal-text {
	background-image: linear-gradient(135deg, #c0c0c0, #ffffff, #c0c0c0);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
	/* 多层阴影模拟金属反光和立体感 */
	text-shadow: 
		0 1px 0 #888,
		0 2px 0 #999,
		0 3px 0 #aaa,
		0 4px 0 #bbb,
		0 5px 5px rgba(0, 0, 0, 0.3);
}