更多操作
Xp00000000(留言 | 贡献) 小无编辑摘要 标签:已被回退 |
Xp00000000(留言 | 贡献) 小无编辑摘要 标签:已被回退 |
||
第6行: | 第6行: | ||
.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; | ||
} | } | ||
2025年4月19日 (六) 21:44的版本
/* 首页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;
}