css mask 案例

news2025/2/4 6:47:11

文章目录

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

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>