css mask 案例

文章目录

一、基本用法
二、图案遮罩
二、文字阴影效果
三、日历探照灯效果

CSS的mask属性用于定义一个可重复使用的遮罩，可以将其应用到任何可视元素上。这个功能类似于Photoshop中的图层蒙版。通过mask属性，可以创建独特的效果，比如圆形、渐变或图案性的遮罩。

一、基本用法

mask和background属性基本是一致的，主要有以下：

mask-image：用于指定要用作遮罩的图像。可以是任何有效的图像路径。
mask-mode：设置遮罩的模式，例如alpha、luminance或luminance-inverted。这决定了遮罩如何影响元素。
mask-position：确定遮罩的位置，例如center、top、left等。
mask-size：指定遮罩的尺寸。可以是具体的数值或关键字，如cover、contain等。

想要了解更多值可以参考MDN官网。本篇博客主要讲mask案例效果

二、图案遮罩

在这里我们会用到两张图片，即下面的猫图片和爱心图片。我们想实现的效果即是将猫放入爱心中，爱心之外的图片剪切掉。

基本图片
在这里插入图片描述

实现效果

在这里插入图片描述

案例代码

<template><div class="mask"><img src="@/assets/cat.png" alt="" /></div>
</template><script setup lang="ts">
import { ref, reactive } from "vue";
</script>
<style scoped>
.mask {width: 1200px;height: 780px;-webkit-mask-image: url("../../assets/love.png");-webkit-mask-repeat: no-repeat;-webkit-mask-size: 100% 100%;
}
img {width: 1200px;height: 780px;
}
</style>

二、文字阴影效果

在这里插入图片描述
如上图所示，文字的阴影从远到近看起来有种由虚到实的效果。我们也可以采用mask-image来实现

<template><div class="reflection"><span> HELLO WORLD </span></div>
</template><script setup lang="ts">
import { ref, reactive } from "vue";
</script>
<style scoped lang="scss">
.reflection {display: flex;justify-content: center;align-items: center;width: 500px;height: 200px;color: #fff;background-color: #f5e1da;span {position: relative;z-index: 2;font-size: 50px;font-weight: bolder;&::before {position: absolute;left: 0px;bottom: 0px;z-index: -1;content: "HELLO WORLD";transform: translate(-18px, 7px) scaleY(0.5) skew(45deg);color: #000;filter: blur(2px);   //模糊-webkit-mask-image: linear-gradient(0deg, black, transparent);}}
}
</style>

在上面案例中，阴影部分采用的是伪类进行实现，并对阴影进行缩放倾斜等效果。最后采用模糊，遮罩实现由虚到实的效果

三、日历探照灯效果

在这里插入图片描述
我们可以看见，鼠标位置变化照亮周围的边框，这个实现也可以采用mask-image来实现

<template><div ref="gridBody" class="grid-body"><div ref="gridMask" class="grid-mask"><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div></div><div class="grid-item">1</div><div class="grid-item">2</div><div class="grid-item">3</div><div class="grid-item">4</div><div class="grid-item">5</div><div class="grid-item">6</div><div class="grid-item">7</div><div class="grid-item">8</div><div class="grid-item">9</div></div><router-view></router-view>
</template>
<script setup lang="ts">
import { ref, onMounted } from "vue";const gridBody = ref<any>(null);
const gridMask = ref<any>(null);onMounted(() => {let bounding = gridMask.value?.getBoundingClientRect();gridBody.value?.addEventListener("mousemove", (e: MouseEvent): void => {let x = e.pageX;let y = e.pageY;gridMask.value.style.webkitMaskPosition = `${x - bounding.x - 80}px ${y - bounding.y - 80}px`;});
});
</script><style scoped lang="scss">
.grid-body {width: 300px;height: 300px;padding: 10px;box-sizing: border-box;position: relative;display: grid;grid-template-columns: repeat(3, 1fr);gap: 10px;cursor: default;color: rgba(255, 255, 255, 0.8);background-color: rgb(60, 60, 60);
}.grid-item {display: flex;align-items: center;justify-content: center;border: 3px solid rgba(255, 255, 255, 0);
}.grid-mask {width: 100%;height: 100%;padding: 10px;box-sizing: border-box;position: absolute;display: grid;grid-template-columns: repeat(3, 1fr);gap: 10px;background: transparent;-webkit-mask-image: radial-gradient(circle at center,white 0%,transparent 80px);-webkit-mask-repeat: no-repeat;-webkit-mask-size: 160px 160px;pointer-events: none;
}.grid-mask div {border: 3px solid rgba(255, 255, 255, 0.5);
}
</style>