jsasg
fdc9064739
All checks were successful
Gitea Actions Official-website / deploy-dev (push) Successful in 4s
64 lines
1.6 KiB
CSS
64 lines
1.6 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.48rem;
|
||
color: #fff;
|
||
text-align: center;
|
||
margin-top: 1.5rem;
|
||
margin-bottom: 0.6rem;
|
||
|
||
}
|
||
.xn-p {
|
||
padding-top: 0.6rem;
|
||
font-size: 0.16rem;
|
||
margin-left: 0.47rem;
|
||
}
|
||
.xn-p p {
|
||
width: 5.84rem;
|
||
color: #cbcfd8;
|
||
line-height: 1.5;
|
||
/* 核心：左内边距控制第二行缩进量 */
|
||
padding-left: 0.8rem;
|
||
/* 首行向左偏移，抵消左内边距，实现第二行缩进 */
|
||
text-indent: -0.8rem;
|
||
/* 确保p标签是块级，且换行正常 */
|
||
display: block;
|
||
word-wrap: break-word;
|
||
white-space: nowrap;
|
||
/* 2. 超出元素宽度的内容隐藏 */
|
||
overflow: hidden;
|
||
/* 3. 将超出的文本替换为省略号... */
|
||
text-overflow: ellipsis;
|
||
/* 可选：给元素设置一个固定宽度（确保省略效果生效） */
|
||
} |