更多操作
Xp00000000(留言 | 贡献) 小无编辑摘要 |
Xp00000000(留言 | 贡献) 小无编辑摘要 标签:已被回退 |
||
第31行: | 第31行: | ||
pointer-events: none; | pointer-events: none; | ||
z-index: 1; | z-index: 1; | ||
} | |||
.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.3) 50%, | |||
transparent 100%); | |||
pointer-events: none; | |||
z-index: 1; | |||
transition: opacity 0.3s; | |||
} | |||
.home-card--button:hover, | |||
#home-nav .home-card:hover { | |||
transform: translateY(0px); | |||
box-shadow: 0 12px 24px rgba(0,0,0,0.4); | |||
} | |||
.home-card--button:hover .home-card__background img, | |||
#home-nav .home-card:hover .home-card__background img { | |||
transform: scale(1.07); | |||
} | |||
.home-card--button:hover .home-card__background::before, | |||
#home-nav .home-card:hover .home-card__background::before { | |||
opacity: 0.9; | |||
} | } |
2025年4月19日 (六) 21:36的版本
/* 首页home-card--button的修复 */
.home-card--button {
position: relative;
overflow: hidden;
}
.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;
}
.home-card__background::before {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
content: "";
background: linear-gradient(90deg,
rgba(0, 0, 0, 1) 0%,
rgba(0, 0, 0, 0.4) 50%,
transparent 100%);
pointer-events: none;
z-index: 1;
}
.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.3) 50%,
transparent 100%);
pointer-events: none;
z-index: 1;
transition: opacity 0.3s;
}
.home-card--button:hover,
#home-nav .home-card:hover {
transform: translateY(0px);
box-shadow: 0 12px 24px rgba(0,0,0,0.4);
}
.home-card--button:hover .home-card__background img,
#home-nav .home-card:hover .home-card__background img {
transform: scale(1.07);
}
.home-card--button:hover .home-card__background::before,
#home-nav .home-card:hover .home-card__background::before {
opacity: 0.9;
}