模板:色卡标签/styles.css

/* ============================================
   色卡标签
   ============================================ */

.tag {
    position: relative;
    overflow: hidden;
}

/* 背景图铺满卡片 */
.tag-bg-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* 链接层铺满卡片 */
.tag__link {
    position: absolute;
    inset: 0;
    z-index: 10;
    display: block;
    font-size: 0;
}
.tag__link a {
    display: block;
    width: 100%;
    height: 100%;
}

/* 四角装饰 */
.tag__corner {
    position: absolute;
    z-index: 2;
    color: #fff;
    font-size: 0.9em;
    line-height: 1;
    pointer-events: none;
}
.tag__corner--tl { top: 0.3em; left: 0.4em; }
.tag__corner--tr { top: 0.3em; right: 0.4em; }
.tag__corner--bl { bottom: 0.3em; left: 0.4em; }
.tag__corner--br { bottom: 0.3em; right: 0.4em; }

/* ---- 悬停高亮：亮度呼吸 ---- */
@keyframes tag-highlight-breath {
    0%, 100% { filter: brightness(1); }
    50%      { filter: brightness(1.35); }
}
.tag:hover {
    animation: tag-highlight-breath var(--tag-highlight-speed, 2s) ease-in-out infinite;
}