模板:图片交换链接/styles.css - 版本历史

2026年10月5日 (一) 07:53 Ancimen

2026-10-05T07:53:25Z

←上一版本		2026年10月5日 (一) 15:53的版本
第36行：		第36行：
	}		}

	/* ---- ~~里图片：占满卡片，从右上滑入~~ ---- */		/* ---- 里图片：占满卡片，淡入 ---- */
	.pcl__image {		.pcl__image {
	position: absolute;		position: absolute;
	inset: 0;		inset: 0;
	~~transform~~: ~~translate(40%, -40%)~~;		opacity: 0;
	transition: ~~transform~~ 0.4s ease;		transition: opacity 0.4s ease;
	z-index: 0;		z-index: 0;
	}		}
第75行：		第75行：
	}		}
	.pcl:hover .pcl__image {		.pcl:hover .pcl__image {
	~~transform~~: ~~translate(0, 0)~~;		opacity: 1;
	}		}

第82行：		第82行：
	.pcl__surface { opacity: 0; }		.pcl__surface { opacity: 0; }
	.pcl__content { opacity: 1; }		.pcl__content { opacity: 1; }
	.pcl__image { ~~transform~~: ~~translate(0, 0)~~; }		.pcl__image { opacity: 1; }
	}		}

2026年10月5日 (一) 07:51 Ancimen

2026-10-05T07:51:48Z

←上一版本		2026年10月5日 (一) 15:51的版本
第40行：		第40行：
	position: absolute;		position: absolute;
	inset: 0;		inset: 0;
	~~opacity: 0.3;~~
	transform: translate(40%, -40%);		transform: translate(40%, -40%);
	transition: transform 0.4s ease;		transition: transform 0.4s ease;

2026年10月5日 (一) 07:50 Ancimen

2026-10-05T07:50:38Z

←上一版本		2026年10月5日 (一) 15:50的版本
第23行：		第23行：
	object-fit: cover;		object-fit: cover;
	display: block;		display: block;
			position: relative;
			z-index: 1;
	}		}

第41行：		第43行：
	transform: translate(40%, -40%);		transform: translate(40%, -40%);
	transition: transform 0.4s ease;		transition: transform 0.4s ease;
			z-index: 0;
	}		}
	.pcl__image img {		.pcl__image img {

2026年10月5日 (一) 07:47 Ancimen

2026-10-05T07:47:08Z

←上一版本		2026年10月5日 (一) 15:47的版本
第23行：		第23行：
	object-fit: cover;		object-fit: cover;
	display: block;		display: block;
	}

	~~/* ---- 表图片滤镜层 ---- */~~
	~~.pcl__filter {~~
	~~position: absolute;~~
	~~inset: 0;~~
	}		}

2026年10月5日 (一) 07:45 Ancimen

2026-10-05T07:45:10Z

←上一版本		2026年10月5日 (一) 15:45的版本
第23行：		第23行：
	object-fit: cover;		object-fit: cover;
	display: block;		display: block;
			}

			/* ---- 表图片滤镜层 ---- */
			.pcl__filter {
			position: absolute;
			inset: 0;
	}		}

2026年10月5日 (一) 07:40 Ancimen

2026-10-05T07:40:03Z

←上一版本		2026年10月5日 (一) 15:40的版本
第32行：		第32行：
	transition: opacity 0.4s ease;		transition: opacity 0.4s ease;
	z-index: 1;		z-index: 1;
	}
	~~.pcl__inner {~~
	~~position: absolute;~~
	~~top: 50%;~~
	~~left: 50%;~~
	~~width: 60%;~~
	~~height: 60%;~~
	~~transform: translate(-50%, -50%);~~
	}		}

	/* ---- ~~里图片：从右上角滑入~~ ---- */		/* ---- 里图片：占满卡片，从右上滑入 ---- */
	.pcl__image {		.pcl__image {
	position: absolute;		position: absolute;
	inset: 0;		inset: 0;
	opacity: 0.3;		opacity: 0.3;
	transform: translate(80%, -80%);		transform: translate(40%, -40%);
	transition: transform 0.4s ease;		transition: transform 0.4s ease;
	}		}
第53行：		第45行：
	width: 100%;		width: 100%;
	height: 100%;		height: 100%;
	object-fit: ~~contain~~;		object-fit: cover;
	display: block;		display: block;
	}		}
第62行：		第54行：
	top: 50%;		top: 50%;
	left: 50%;		left: 50%;
	width: ~~100~~%;		width: 60%;
	transform: translate(-50%, calc(-50% + 0.8em));		transform: translate(-50%, calc(-50% + 0.8em));
	text-align: center;		text-align: center;

Ancimen：创建页面，内容为“/* ============================================ 图片交换链接桌面端：悬停切换移动端：直接显示内容层 ============================================ / .pcl { position: relative; overflow: hidden; box-shadow: 0 0 0.5em rgba(0, 0, 0, 0.8); } / ---- 表层图片：默认可见 ---- */ .pclsurface { position: absolute; inset: 0; transition: opacity 0.4s ease; z-index: 2; } .pclsurface img { w…”

2026-10-05T07:38:00Z

创建页面，内容为“============================================ 图片交换链接桌面端：悬停切换移动端：直接显示内容层 ============================================： .pcl { position: relative; overflow: hidden; box-shadow: 0 0 0.5em rgba(0, 0, 0, 0.8); } ---- 表层图片：默认可见 ----： .pcl__surface { position: absolute; inset: 0; transition: opacity 0.4s ease; z-index: 2; } .pcl__surface img { w…”

新页面

/* ============================================
图片交换链接
桌面端：悬停切换
移动端：直接显示内容层
============================================ */

.pcl {
position: relative;
overflow: hidden;
box-shadow: 0 0 0.5em rgba(0, 0, 0, 0.8);
}

/* ---- 表层图片：默认可见 ---- */
.pcl__surface {
position: absolute;
inset: 0;
transition: opacity 0.4s ease;
z-index: 2;
}
.pcl__surface img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}

/* ---- 内容层：默认隐藏 ---- */
.pcl__content {
position: absolute;
inset: 0;
opacity: 0;
transition: opacity 0.4s ease;
z-index: 1;
}
.pcl__inner {
position: absolute;
top: 50%;
left: 50%;
width: 60%;
height: 60%;
transform: translate(-50%, -50%);
}

/* ---- 里图片：从右上角滑入 ---- */
.pcl__image {
position: absolute;
inset: 0;
opacity: 0.3;
transform: translate(80%, -80%);
transition: transform 0.4s ease;
}
.pcl__image img {
width: 100%;
height: 100%;
object-fit: contain;
display: block;
}

/* ---- 文本：覆盖在里图片上 ---- */
.pcl__text {
position: absolute;
top: 50%;
left: 50%;
width: 100%;
transform: translate(-50%, calc(-50% + 0.8em));
text-align: center;
font-size: 1em;
line-height: 1.2;
z-index: 1;
}
.pcl__text a {
color: inherit;
}

/* ---- 悬停切换 ---- */
.pcl:hover .pcl__surface {
opacity: 0;
}
.pcl:hover .pcl__content {
opacity: 1;
}
.pcl:hover .pcl__image {
transform: translate(0, 0);
}

/* ---- 移动端：直接显示内容层 ---- */
@media (hover: none) {
.pcl__surface { opacity: 0; }
.pcl__content { opacity: 1; }
.pcl__image { transform: translate(0, 0); }
}