模板:色卡标签/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%, 38%   { opacity: 0.25; }
    50%       { opacity: 0; }
    62%, 100% { opacity: 0.25; }
}
.tag::after {
    content: "";
    position: absolute;
    inset: 0;
    background: var(--tag-highlight, #ffffff);
    opacity: 0;
    pointer-events: none;
    z-index: 0;
}
.tag:hover::after {
    animation: tag-highlight-breath var(--tag-highlight-speed, 2s) ease-in-out infinite;
}