You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
137 lines
3.2 KiB
137 lines
3.2 KiB
.mask {
|
|
position: fixed;
|
|
top: 0;
|
|
left: 0;
|
|
width: 100vw;
|
|
height: 100vh;
|
|
z-index: 101;
|
|
background: #091b25;
|
|
display: block;
|
|
opacity: 0;
|
|
visibility: hidden;
|
|
pointer-events: none;
|
|
transition: opacity .8s ease, visibility .8s ease;
|
|
|
|
.mask-header {
|
|
margin: 1.5625rem auto 1.5625rem;
|
|
left: 0;
|
|
right: 0;
|
|
width: 97%;
|
|
height: 4rem;
|
|
padding: 0 1.5625rem;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: flex-end;
|
|
|
|
.mask-header__icon-btn {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
width: 2.375rem;
|
|
height: 2.375rem;
|
|
border-radius: .75rem;
|
|
|
|
&.search-btn {
|
|
border: 1px solid rgba(255, 255, 255, 1);
|
|
background: transparent;
|
|
}
|
|
|
|
img,
|
|
svg {
|
|
fill: var(--color-white);
|
|
width: 1.3438rem;
|
|
height: 1.3438rem;
|
|
}
|
|
}
|
|
}
|
|
|
|
.mask-content {
|
|
padding: 20px;
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 20px;
|
|
}
|
|
|
|
.mask-footer__nav-col {
|
|
h4 {
|
|
color: rgba(255, 255, 255, 1);
|
|
font-family: "OPPO Sans 4.0";
|
|
font-style: Medium;
|
|
font-size: var(--font-16);
|
|
line-height: var(--font-18);
|
|
font-weight: 500;
|
|
letter-spacing: 0rem;
|
|
text-align: left;
|
|
margin-bottom: 1rem;
|
|
}
|
|
|
|
a {
|
|
display: block;
|
|
color: rgba(255, 255, 255, 1);
|
|
opacity: 0.8;
|
|
font-family: "OPPO Sans 4.0";
|
|
font-style: Regular;
|
|
font-size: var(--font-14);
|
|
line-height: var(--font-16);
|
|
font-weight: 400;
|
|
letter-spacing: 0rem;
|
|
text-align: left;
|
|
margin-bottom: .875rem;
|
|
transition: opacity 0.3s ease;
|
|
|
|
&:hover {
|
|
opacity: 1;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.mask.show {
|
|
opacity: 1;
|
|
visibility: visible;
|
|
pointer-events: auto;
|
|
}
|
|
|
|
/* 菜单切换：三条线 → X（由 body.is-mask-open 驱动，与 mask 显隐同步） */
|
|
.nav-toggle-icon__bar {
|
|
transition:
|
|
transform 0.35s cubic-bezier(0.4, 0, 0.2, 1),
|
|
opacity 0.25s ease;
|
|
}
|
|
|
|
.nav-toggle-icon__bar--top {
|
|
transform-origin: 12px 7px;
|
|
}
|
|
|
|
.nav-toggle-icon__bar--mid {
|
|
transform-origin: 12px 12px;
|
|
}
|
|
|
|
.nav-toggle-icon__bar--bot {
|
|
transform-origin: 12px 17px;
|
|
}
|
|
|
|
body.is-mask-open .nav-toggle-icon__bar--top {
|
|
transform: translateY(5px) rotate(45deg);
|
|
}
|
|
|
|
body.is-mask-open .nav-toggle-icon__bar--mid {
|
|
opacity: 0;
|
|
transform: scaleX(0);
|
|
}
|
|
|
|
body.is-mask-open .nav-toggle-icon__bar--bot {
|
|
transform: translateY(-5px) rotate(-45deg);
|
|
}
|
|
|
|
/* 入场 GSAP 动 opacity 时关掉 transition，避免抢过渡；结束后去掉此类再 hover 才有平滑 */
|
|
.mask.mask--nav-motion .mask-footer__nav-col a,
|
|
.mask.mask--nav-motion .mask-footer__nav-col h4 {
|
|
transition: none;
|
|
}
|
|
|
|
/* SplitText 行容器：裁切 y 位移，实现从上向下露出 */
|
|
.mask-split-line {
|
|
overflow: hidden;
|
|
display: block;
|
|
}
|