更多操作
< 用户:卡介菌
小无编辑摘要 |
小无编辑摘要 标签:已被回退 |
||
第1行: | 第1行: | ||
.citizen-section > p, | |||
. | .mw-content-ltr > p { | ||
width: 100%; | |||
margin-top: 20px; | |||
} | } | ||
.home-card--button, | |||
#home-nav .home-card { | |||
position: relative; | |||
overflow: hidden; | |||
display: block; | |||
transition: transform 0.3s ease, box-shadow 0.3s ease; | |||
. | |||
} | } | ||
.home-card--button:hover, | |||
#home-nav .home-card:hover { | |||
.home-card | transform: translateY(-5px); | ||
box-shadow: 0 10px 20px rgba(0,0,0,0.2); | |||
} | } | ||
.home-card__foreground { | .home-card__foreground { | ||
height: 100%; | |||
position: absolute; | position: absolute; | ||
left: 15px; | left: 15px; | ||
color: white; | color: white; | ||
line-height: 48px; | line-height: 48px; | ||
font-weight: bold; | font-weight: bold; | ||
user-select: none; | user-select: none; | ||
pointer-events: none; | pointer-events: none; | ||
z-index: 2; | z-index: 2; | ||
padding: 16px; | |||
text-shadow: 1px 1px 3px rgba(0,0,0,0.5); | |||
} | |||
.home-card__background { | |||
position: relative; | |||
width: 100%; | |||
height: 100%; | |||
} | |||
.home-card__background img { | |||
width: 100%; | |||
height: 100%; | |||
object-fit: cover; | |||
transition: transform 0.5s cubic-bezier(0.2, 0.9, 0.4, 1.1); | |||
transform-origin: center; | |||
will-change: transform; | |||
backface-visibility: hidden; | |||
} | } | ||
第52行: | 第55行: | ||
bottom: 0; | bottom: 0; | ||
content: ""; | content: ""; | ||
background: linear-gradient( | background: linear-gradient(135deg, | ||
rgba(0,0,0,0.8) 0%, | |||
rgba(0,0,0,0.2) 100%); | |||
pointer-events: none; | pointer-events: none; | ||
z-index: 1; | z-index: 1; | ||
transition: opacity 0.3s; | |||
} | |||
.home-card--button:hover .home-card__background::before, | |||
#home-nav .home-card:hover .home-card__background::before { | |||
opacity: 0.9; | |||
} | } | ||
#home-nav .home-card:hover .home-card__background img { | |||
transform: scale(1.07) translateY(-5px); | |||
} | |||
.citizen-page-heading { | .citizen-page-heading { | ||
display: flex; | display: flex; | ||
第72行: | 第76行: | ||
gap: 0.1rem; | gap: 0.1rem; | ||
} | } | ||
.firstHeading-container { | .firstHeading-container { | ||
display: flex; | display: flex; | ||
第79行: | 第82行: | ||
gap: 0.1rem; | gap: 0.1rem; | ||
} | } | ||
.title-shortlink-container { | .title-shortlink-container { | ||
width: 100%; | width: 100%; | ||
order: 1; | order: 1; | ||
} | } | ||
#siteSub { | #siteSub { | ||
order: 2; | order: 2; | ||
} | } | ||
2025年4月13日 (日) 03:47的版本
.citizen-section > p,
.mw-content-ltr > p {
width: 100%;
margin-top: 20px;
}
.home-card--button,
#home-nav .home-card {
position: relative;
overflow: hidden;
display: block;
transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.home-card--button:hover,
#home-nav .home-card:hover {
transform: translateY(-5px);
box-shadow: 0 10px 20px rgba(0,0,0,0.2);
}
.home-card__foreground {
height: 100%;
position: absolute;
left: 15px;
color: white;
line-height: 48px;
font-weight: bold;
user-select: none;
pointer-events: none;
z-index: 2;
padding: 16px;
text-shadow: 1px 1px 3px rgba(0,0,0,0.5);
}
.home-card__background {
position: relative;
width: 100%;
height: 100%;
}
.home-card__background img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 0.5s cubic-bezier(0.2, 0.9, 0.4, 1.1);
transform-origin: center;
will-change: transform;
backface-visibility: hidden;
}
.home-card__background::before {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
content: "";
background: linear-gradient(135deg,
rgba(0,0,0,0.8) 0%,
rgba(0,0,0,0.2) 100%);
pointer-events: none;
z-index: 1;
transition: opacity 0.3s;
}
.home-card--button:hover .home-card__background::before,
#home-nav .home-card:hover .home-card__background::before {
opacity: 0.9;
}
#home-nav .home-card:hover .home-card__background img {
transform: scale(1.07) translateY(-5px);
}
.citizen-page-heading {
display: flex;
flex-direction: column;
gap: 0.1rem;
}
.firstHeading-container {
display: flex;
flex-wrap: wrap;
align-items: baseline;
gap: 0.1rem;
}
.title-shortlink-container {
width: 100%;
order: 1;
}
#siteSub {
order: 2;
}