liqian
48e3d7f846
All checks were successful
Gitea Actions Official-website / deploy-dev (push) Successful in 3s
53 lines
1.0 KiB
CSS
53 lines
1.0 KiB
CSS
.xn-container {
|
||
width: 6.8rem;
|
||
margin: 0 auto;
|
||
box-sizing: border-box;
|
||
}
|
||
|
||
/* 图片容器样式（核心） */
|
||
.xn-image-section {
|
||
overflow: hidden;
|
||
border-radius: 0.16rem;
|
||
background: #0d0c10;
|
||
border: 1px solid #3f3f45;
|
||
width: 6.8rem;
|
||
}
|
||
|
||
.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.36rem;
|
||
color: #fff;
|
||
text-align: center;
|
||
margin-top: 1.5rem;
|
||
margin-bottom: 0.6rem;
|
||
}
|
||
.xn-p {
|
||
width: 6.8rem;
|
||
padding-top: 0.6rem;
|
||
padding-left: 0.11rem;
|
||
font-size: 0.16rem;
|
||
margin: 0 auto;
|
||
}
|
||
.xn-p p {
|
||
color: #cbcfd8;
|
||
text-align: left;
|
||
line-height: 1.5;
|
||
}
|