CSS属性-mask

最新推荐文章于 2024-05-30 16:48:43 发布

☞恰巧喜欢☜

最新推荐文章于 2024-05-30 16:48:43 发布

阅读量1.2k

点赞数 15

文章标签： css 前端

本文链接：https://blog.csdn.net/qq_63534905/article/details/135699169

版权

属性 `mask` 用于创建遮罩效果，可以实现图像裁剪、透明度渐变、文本效果等。下面是一些常用的 `mask` 属性及其说明

mask-image: 定义要用作遮罩的图像。可以使用图片、线性渐变、径向渐变等作为遮罩。
mask-size: 定义遮罩的尺寸。可以设置具体的宽度和高度值，也可以使用关键字 auto 自动缩放。
mask-position: 定义遮罩的位置。可以设置具体的水平和垂直定位值，也可以使用关键字 center 居中对齐。
mask-repeat: 定义遮罩的重复方式。可以设置 repeat（默认）、no-repeat、repeat-x、repeat-y 等。
mask-origin: 定义遮罩的起始位置。可以设置 border-box（默认）、padding-box 或 content-box。
mask-mode: 定义遮罩的叠加模式。可以设置 alpha（默认）表示使用遮罩图像的 alpha 通道，或者 luminance 表示使用遮罩图像的亮度。

简单做了一个案例，代码如下：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        html,
        body {
            box-sizing: border-box;
            margin: 0;
            padding: 0;
            width: 100%;
            height: 100%;
            background-color: black;
        }

        .box {
            width: 800px;
            height: 800px;
            /* background-color: pink; */
            display: flex;
            flex-wrap: wrap;
            align-content: space-between;
            justify-content: space-between;
            margin: 30px auto;
            position: relative;
        }

        img {
            width: 240px;
        }

        .pointer {
            position: absolute;
            --l: 30px;  /* 长度*/
            --g: 15px;  /* 间隔*/
            --t: 3px;   /* 粗细 */
            --s: 240px; /* 框住的元素大小 */
            --x: 0px;
            --y: 0px;
            width: calc(var(--s) + var(--g) * 2);
            height: calc(var(--s) + var(--g) * 2);
            border: var(--t) solid #fff;
            left: calc(var(--x) - var(--g));
            top: calc(var(--y) - var(--g));
            /* background: conic-gradient(at var(--l) var(--l), transparent 75%, red 75%) 0 0 / calc(100% - var(--l)) calc(100% - var(--l)); */
            --mask: conic-gradient(at var(--l) var(--l), transparent 75%, red 75%) 0 0 / calc(100% - var(--l)) calc(100% - var(--l));
            transition: 0.5s;
            mask: var(--mask);
            -webkit-mask: var(--mask)
        }
    </style>
</head>

<body>
    <div class="box">
        <div class="pointer"></div>
        <img src="./1.jpg" alt="">
        <img src="./2.jpg" alt="">
        <img src="./3.jpg" alt="">
        <img src="./4.jpg" alt="">
        <img src="./5.jpg" alt="">
        <img src="./6.jpg" alt="">
        <img src="./7.jpg" alt="">
        <img src="./8.jpg" alt="">
        <img src="./9.jpg" alt="">
    </div>
    <script>
        const imgs = document.querySelectorAll(".box img")
        const pointer = document.querySelector(".pointer")
        for (const img of imgs) {
            img.onmouseenter = () => {
                pointer.style.setProperty('--x', img.offsetLeft + "px")
                pointer.style.setProperty('--y', img.offsetTop + "px")
                pointer.style.setProperty('--s', img.offsetWidth + "px")
            }
        }
    </script>
</body>

</html>