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>

日历探照灯案例是参考了另一位博主,在这里实现过程我就不过多赘述,效果不错,小伙伴们也可以自己动手实现一下
想要看日历探照灯具体实现思路,可以跳转至https://blog.csdn.net/weixin_42662269/article/details/119859827

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/578110.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

迪文屏开发保姆级教程6----触摸实现界面切换

这篇文章要讲啥事呢&#xff1f; 本篇文章主要介绍了在DGBUS平台上触摸实现界面切换的方法。 文哥悄悄话&#xff1a; 官方开发指南PDF&#xff1a;&#xff08;不方便下载的私聊我发给你&#xff09; https://download.csdn.net/download/qq_21370051/88647174?spm1001.201…

【STM32单片机】俄罗斯方块游戏

文章目录 一、功能简介二、软件设计三、实验现象联系作者 一、功能简介 本项目使用STM32F103C8T6单片机控制器&#xff0c;IIC OLED液晶、按键等。 主要功能&#xff1a; 系统运行后&#xff0c;OLED显示开机界面&#xff0c;按下K1键进入游戏。K1键控制翻转&#xff0c;K2控…

关于OpenCV中 CV_Assert() 的使用引起程序中止/崩溃问题

CV_Assert() 的作用是&#xff1a;若括号中的表达式值为 false &#xff0c;则返回一个错误信息&#xff0c;并终止程序执行。 但是 CV_Assert() 与 assert 不同&#xff0c;CV_Assert() 会通过异常抛出&#xff0c;所以如果使用 CV_Assert()&#xff0c;可以通过捕获异常而不是…

神经网络介绍

目录 知识点介绍 知识点介绍 前馈神经网络&#xff1a;&#xff08;前馈网络的数据只向一个方向传播&#xff09; RNN循环神经网络&#xff0c;下图中多个 RNN 层都是“同一个层”&#xff0c;这一点与之前的神经网络是不一样的。

JavaScript基础知识点总结:从零开始学习JavaScript(二)

如果大家感感兴趣也可以去看&#xff1a; &#x1f389;博客主页&#xff1a;阿猫的故乡 &#x1f389;系列专栏&#xff1a;JavaScript专题栏 &#x1f389;ajax专栏&#xff1a;ajax知识点 &#x1f389;欢迎关注&#xff1a;&#x1f44d;点赞&#x1f64c;收藏✍️留言 学习…

智能优化算法应用:基于驾驶训练算法3D无线传感器网络(WSN)覆盖优化 - 附代码

智能优化算法应用&#xff1a;基于驾驶训练算法3D无线传感器网络(WSN)覆盖优化 - 附代码 文章目录 智能优化算法应用&#xff1a;基于驾驶训练算法3D无线传感器网络(WSN)覆盖优化 - 附代码1.无线传感网络节点模型2.覆盖数学模型及分析3.驾驶训练算法4.实验参数设定5.算法结果6.…

Springboot整合MVC进阶篇

一、概述 1.1SpringBoot整合SpringMVC配置 SpringBoot对SpringMVC的配置主要包括以下几个方面&#xff1a; 自动配置&#xff1a;SpringBoot会自动配置一个嵌入式的Servlet容器&#xff08;如Tomcat&#xff09;&#xff0c;并为我们提供默认的SpringMVC配置。这样我们无需手动…

深圳锐科达SIP矿用电话模块SV-2801VP

深圳锐科达SIP矿用电话模块SV-2801VP 一、简介 SV-2800VP系列模块是我司设计研发的一款用于井下的矿用IP音频传输模块&#xff0c;可用此模块打造一套低延迟、高效率、高灵活和多扩展的IP矿用广播对讲系统&#xff0c;亦可对传统煤矿电话系统加装此模块&#xff0c;进行智能化…

基于5G智能网关的智慧塔吊监测方案

塔吊是建筑施工中必不可少的设施&#xff0c;由于塔吊工作重心高、起重载荷大、人工视距/视角受限等因素&#xff0c;也使得塔吊在工作过程中着较多的危险因素。对此&#xff0c;可以部署基于工业5G智能网关搭建智慧塔吊安全监测系统&#xff0c;实现对塔吊运行的全局精细监测感…

TP-Link路由器桥接设置

本文介绍了TP-Link路由器无线桥接设置方法&#xff1b;无线桥接指的就是通过无线的方式&#xff0c;把两台(多台)无线路由器连接起来&#xff0c;进行桥接的几台路由器中&#xff0c;只要有一台可以上网&#xff0c;剩下的也就可以上网了&#xff1b;主要作用是用来扩大无线WiF…

【STM32单片机】电子木鱼设计

文章目录 一、功能简介二、软件设计三、实验现象联系作者 一、功能简介 本项目使用STM32F103/F407单片机控制器&#xff0c;TFTLCD触摸屏、蜂鸣器等。 主要功能&#xff1a; 系统运行后&#xff0c;TFTLCD显示画面&#xff0c;可触摸木鱼区域&#xff0c;功德计数加1&#xf…

漏刻有时数据可视化Echarts组件开发(46)散点图颜色判断

series组件 series: [{name: Top 5,type: scatter,coordinateSystem: bmap,data: convertData(data.sort(function (a, b) {return b.value - a.value;}).slice(0, 6)),symbolSize: 20,encode: {value: 2},showEffectOn: render,rippleEffect: {brushType: stroke},label: {fo…

分布式系统架构设计之分布式通信机制

二、分布式通信机制&#xff1a;保障系统正常运行基石 在分布式系统中&#xff0c;各个组件之间的通信是保障系统正常运行的基石&#xff0c;直接影响到系统的性能、可扩展性以及整体的可维护性。接下来我们就一起看看通信在分布式系统中的重要性&#xff0c;以及一些常用的技…

Java---IO流讲解(2)

文章目录 1. 字符流1.1 为什么出现字符流1.2 字符流写数据的5种方式1.3 字符流读数据的两种方式1.4 字符缓冲流1.5 字符缓冲流特有功能 2. IO流小结2.1 字节流2.2 字符流 1. 字符流 1.1 为什么出现字符流 由于字节流操作中文时不是特别方便&#xff0c;因此Java提供了字符流。…

SpringBoot - Maven 打包合并一个胖 JAR 以及主项目 JAR 依赖 JAR 分离打包解决方案

问题描述 <plugin><groupId>org.springframework.boot</groupId><artifactId>spring-boot-maven-plugin</artifactId><version>2.1.18.RELEASE</version><configuration><!--<classifier>exec</classifier>--…

12.25广义分布外检测学习/代码复现

A model.getA().toarray() # b np.array(model.RHS) sense np.array(model.sense) f np.array(model.obj)Aineq np.vstack((-Ale, Age)) # 把所有的<和>组合在一起 bineq np.append(-ble, bge) # 这里用append使bineq为一个一维矩阵&#xff0c;而不是2行1列的二…

SpringBoot 3.2.0 基于Spring Security+JWT实现动态鉴权

依赖版本 JDK 17 Spring Boot 3.2.0 Spring Security 6.2.0 工程源码&#xff1a;Gitee 为了能够不需要额外配置就能启动项目&#xff0c;看到配置效果。用例采用模拟数据&#xff0c;可自行修改为对应的ORM操作 编写Spring Security基础配置 导入依赖 <properties>&l…

java练习之abstract (抽象) final(最终) static(静态) 练习

1&#xff1a;分析总结&#xff1a;写出private、abstract、static、final之间能否联动使用&#xff0c;并写出分析原因 private static final 之间可以任意结合 abstract 不可以与private static final 结合使用 2&#xff1a;关于三个修饰符描述不正确的是(AD) A. static …

Linux操作系统基础知识点

Linux是一种计算机操作系统&#xff0c;其内核由林纳斯本纳第克特托瓦兹&#xff08;Linus Benedict Torvalds&#xff09;于1991年首次发布。Linux操作系统通常与GNU套件一起使用&#xff0c;因此也被称为GNU/Linux。它是一种类UNIX的操作系统&#xff0c;设计为多用户、多任务…

计算机组成原理综合6

补码表示&#xff1a; X&#xff1a;1111 1111 1111 1101 Y&#xff1a;1111 1111 1101 1111 Z&#xff1a;0111 1111 1111 1100 转原码表示&#xff1a;从右往左找第一个“1”&#xff0c;左边的所有数值位按位取反 X&#xff1a;1111 1111 1111 1101 1000 0000 00…