liqian
5740437cf5
All checks were successful
Gitea Actions Official-website / deploy-dev (push) Successful in 5s
54 lines
1.1 KiB
CSS
54 lines
1.1 KiB
CSS
/* 页面容器（模拟官网宽屏布局） */
|
||
.xn-container {
|
||
min-width: 1280px;
|
||
max-width: 1440px;
|
||
width: 100%;
|
||
margin: 0 auto;
|
||
}
|
||
|
||
/* 图片容器样式（核心） */
|
||
.xn-image-section {
|
||
overflow: hidden;
|
||
border-radius: 16px;
|
||
/* 官网图片圆角风格 */
|
||
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
|
||
max-width: 1440px;
|
||
min-width: 1280px;
|
||
margin: 0 auto;
|
||
}
|
||
|
||
.zoom-image {
|
||
width: 100%;
|
||
height: auto;
|
||
display: block;
|
||
/* 调整transform过渡时间为2s，opacity为1.5s，可按需修改 */
|
||
transition: transform 2s cubic-bezier(0.25, 0.1, 0.25, 1), opacity 1.5s ease;
|
||
transform: scale(0.8);
|
||
/* 初始缩放比例 */
|
||
opacity: 0.9;
|
||
/* 初始透明度（略暗，放大后变亮） */
|
||
}
|
||
|
||
/* 滚动触发后的放大状态 */
|
||
.zoom-image.active {
|
||
transform: scale(1.1);
|
||
/* 放大5%（官网常用比例，不夸张） */
|
||
opacity: 1;
|
||
}
|
||
.xn-t {
|
||
font-size: 0.67rem;
|
||
color: #cbcfd8;
|
||
text-align: center;
|
||
margin-top: 4.7rem;
|
||
margin-bottom: 1.26rem;
|
||
}
|
||
.xn-p {
|
||
padding-top: 0.6rem;
|
||
}
|
||
.xn-p p {
|
||
font-size: clamp(16px, 1vw, 0.22rem);
|
||
color: #fff;
|
||
text-align: center;
|
||
line-height: 2.4;
|
||
}
|