当前位置：首页 > article >正文

CSS系列（32）-- Mask详解

article 2024/12/24 20:49:51

前端技术探索系列：CSS Mask详解 🎭

致读者：探索遮罩效果的艺术 👋

前端开发者们，

今天我们将深入探讨 CSS Mask，这个强大的图像遮罩特性。

基础遮罩 🚀

图像遮罩

/* 基础图像遮罩 */
.image-mask {
    -webkit-mask-image: url('mask.png');
    mask-image: url('mask.png');
    -webkit-mask-size: cover;
    mask-size: cover;
}

/* 多重遮罩 */
.multiple-mask {
    -webkit-mask-image: 
        url('mask1.png'),
        url('mask2.png');
    mask-image: 
        url('mask1.png'),
        url('mask2.png');
    -webkit-mask-composite: source-over;
    mask-composite: add;
}

渐变遮罩

/* 线性渐变遮罩 */
.gradient-mask {
    -webkit-mask-image: linear-gradient(
        to right,
        transparent,
        black
    );
    mask-image: linear-gradient(
        to right,
        transparent,
        black
    );
}

/* 径向渐变遮罩 */
.radial-mask {
    -webkit-mask-image: radial-gradient(
        circle at center,
        black 30%,
        transparent 70%
    );
    mask-image: radial-gradient(
        circle at center,
        black 30%,
        transparent 70%
    );
}

高级效果 🎯

SVG遮罩

/* SVG遮罩 */
.svg-mask {
    -webkit-mask-image: url('data:image/svg+xml,\
        <svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">\
            <circle cx="50" cy="50" r="40" fill="black"/>\
        </svg>');
    mask-image: url('data:image/svg+xml,\
        <svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">\
            <circle cx="50" cy="50" r="40" fill="black"/>\
        </svg>');
}

/* 复杂SVG遮罩 */
.complex-svg-mask {
    -webkit-mask-image: url('mask.svg');
    mask-image: url('mask.svg');
    -webkit-mask-size: contain;
    mask-size: contain;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
}

动画效果

/* 渐变动画 */
@keyframes mask-animation {
    0% {
        -webkit-mask-position: 0% 0%;
        mask-position: 0% 0%;
    }
    100% {
        -webkit-mask-position: 100% 0%;
        mask-position: 100% 0%;
    }
}

.animated-mask {
    -webkit-mask-image: linear-gradient(
        to right,
        transparent 0%,
        black 50%,
        transparent 100%
    );
    mask-image: linear-gradient(
        to right,
        transparent 0%,
        black 50%,
        transparent 100%
    );
    -webkit-mask-size: 300% 100%;
    mask-size: 300% 100%;
    animation: mask-animation 2s infinite;
}

实际应用 💫

图像过渡

/* 图像淡出效果 */
.image-fade {
    -webkit-mask-image: linear-gradient(
        to bottom,
        black 50%,
        transparent
    );
    mask-image: linear-gradient(
        to bottom,
        black 50%,
        transparent
    );
}

/* 交互效果 */
.hover-reveal {
    -webkit-mask-image: radial-gradient(
        circle at var(--x, 50%) var(--y, 50%),
        black 20%,
        transparent 80%
    );
    mask-image: radial-gradient(
        circle at var(--x, 50%) var(--y, 50%),
        black 20%,
        transparent 80%
    );
    transition: --x 0.3s, --y 0.3s;
}

文本效果

/* 文本遮罩 */
.text-mask {
    background: url('pattern.jpg');
    -webkit-mask-image: url('text.svg');
    mask-image: url('text.svg');
    -webkit-mask-size: contain;
    mask-size: contain;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
}

/* 渐变文本 */
.gradient-text {
    background: linear-gradient(45deg, #ff0000, #00ff00);
    -webkit-mask-image: url('text.svg');
    mask-image: url('text.svg');
}

创意效果 ⚡

形状遮罩

/* 六边形遮罩 */
.hexagon-mask {
    -webkit-mask-image: url('data:image/svg+xml,\
        <svg viewBox="0 0 100 100">\
            <polygon points="50 0, 100 25, 100 75, 50 100, 0 75, 0 25"/>\
        </svg>');
    mask-image: url('data:image/svg+xml,\
        <svg viewBox="0 0 100 100">\
            <polygon points="50 0, 100 25, 100 75, 50 100, 0 75, 0 25"/>\
        </svg>');
}

/* 波浪边缘 */
.wave-mask {
    -webkit-mask-image: url('wave.svg');
    mask-image: url('wave.svg');
    -webkit-mask-size: 100% 50px;
    mask-size: 100% 50px;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: bottom;
    mask-position: bottom;
}