CSS mask 实现鼠标跟随镂空效果，阿里面试官必问

于 2024-03-30 01:18:52 发布
阅读量856 收藏 13
点赞数 14
分类专栏： 2024年程序员学习 文章标签： css 计算机外设 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/AUZKAY/article/details/137160597
版权

}`

效果如下：

a12d6122f9beee7eb709522858d77cdb.gif

已经全部都模糊了，只是圆形区域外暗一些。由于::before的尺寸占据整个容器，所以整个背后都变模糊了，圆形外部比较暗是因为半透明渐变的影响。

总之还是不能满足我们的需求，需要寻求新的解决方式。

五、CSS MASK 实现镂空

与其说是让圆形区域不模糊，还不如说是把那块区域给镂空了。就好比之前是一整块磨砂玻璃，然后通过 CSS MASK 打了一个圆孔，这样透过圆孔看到后面肯定是清晰的。

可以对第二个例子稍作修改，通过径向渐变绘制一个透明圆，剩余部分都是纯色的遮罩层，示意如下：

b3f08991f172b551dd944f9e06eb3235.png

用代码实现就是

.wrap::before{

content: ‘’;

position: absolute;

width: 100%;

height: 100%;

left: 0;

top: 0;

-webkit-mask: radial-gradient( circle at calc(var(–x, .5) * 100% )  calc(var(–y, .5) * 100% ), transparent 50px, #000 51px);

background: rgba(0,0,0,.3);

backdrop-filter: blur(5px)

}

这样就实现了文章开头的效果：

d519ff0c41f59e6351fdb0204a9ccc77.gif

完整代码可以查看：https://codepen.io/xboxyan/pen/porpoXJ

六、CSS MASK COMPOSITE 实现更丰富的镂空效果

除了使用径向渐变绘制遮罩层以外，还可以通过 CSS MASK COMPOSITE（遮罩合成）的方式来实现。

CSS MASK COMPOSITE 链接：https://developer.mozilla.org/en-US/docs/Web/CSS/mask-composite

标准关键值如下（firefox支持）：

/* Keyword values */

mask-composite: add; /* 叠加（默认） */

mask-composite: subtract; /* 减去，排除掉上层的区域 */

mask-composite: intersect; /* 相交，只显示重合的地方 */

mask-composite: exclude; /* 排除，只显示不重合的地方 */

遮罩合成是什么意思呢？可以类比 photoshop 中的形状合成，几乎是一一对应的。

2ea333553a1f9e4f892afbb45facba9b.png

-webkit-mask-composite 与标准下的值有所不同，属性值非常多，如下（chorme 、safari 支持）

-webkit-mask-composite 链接：https://developer.mozilla.org/en-US/docs/Web/CSS/-webkit-mask-composite

-webkit-mask-composite: clear; /清除，不显示任何遮罩/

-webkit-mask-composite: copy; /只显示上方遮罩，不显示下方遮罩/

-webkit-mask-composite: source-over;

-webkit-mask-composite: source-in; /只显示重合的地方/

-webkit-mask-composite: source-out; /只显示上方遮罩，重合的地方不显示/

-webkit-mask-composite: source-atop;

-webkit-mask-composite: destination-over;

-webkit-mask-composite: destination-in; /只显示重合的地方/

-webkit-mask-composite: destination-out;/只显示下方遮罩，重合的地方不显示/

-webkit-mask-composite: destination-atop;

-webkit-mask-composite: xor; /只显示不重合的地方/

是不是一脸懵？这里做了一个对应的效果图，如果不太熟练，使用的时候知道有这样一个功能，然后对着找就行了。

86a7053be884f2107b354ca242d0474e.png

回到这里，可以绘制一整块背景和一个圆形背景，然后通过遮罩合成排除（mask-composite: exclude）打一个孔就行了，实现如下：

.wrap::before{

content: ‘’;

position: absolute;

width: 100%;

height: 100%;

left: 0;

top: 0;

-webkit-mask: url(“data:image/svg+xml,%3Csvg width=“50” height=“50” viewBox=“0 0 50 50” fill=“none” xmlns=“http://www.w3.org/2000/svg”%3E%3Ccircle cx=“25” cy=“25” r=“25” fill=”%23C4C4C4"/%3E%3C/svg%3E"), linear-gradient(red, red);

-webkit-mask-size: 50px, 100%;

-webkit-mask-repeat: no-repeat;

-webkit-mask-position: calc(var(–x, .5) * 100% + var(–x, .5) * 100px - 50px )  calc(var(–y, .5) * 100% + var(–y, .5) * 100px - 50px ), 0;

-webkit-mask-composite: xor;   /只显示不重合的地方， chorem 、safari 支持/

mask-composite: exclude; /* 排除，只显示不重合的地方， firefox 支持 */

background: rgba(0,0,0,.3);

backdrop-filter: blur(5px)

}

需要注意-webkit-mask-position中的计算，这样也能很好的实现这个效果：

79a47affd5ddeb372bc648300c4efb34.gif

完整代码可以查看：https://codepen.io/xboxyan/pen/ExvMpQB

你可能已经发现，上述例子中的圆是通过 svg 绘制的，还用到了遮罩合成，看着好像更加繁琐了。其实呢，这是一种更加万能的解决方式，可以带来无限的可能性。比如我需要一个星星⭐️的镂空效果，很简单，先通过一个绘制软件画一个。

2d1a2e7c0a866ad2c353fc941c5a1570.png

然后把这段 svg 代码转义一下，这里推荐使用张鑫旭老师的SVG在线压缩合并工具。

链接：https://www.zhangxinxu.com/sp/svgo/

3e1dfecb53dbe16d60a1bc7dfa9fa433.png

替换到刚才的例子中就可以了。

.wrap::before{

content: ‘’;

position: absolute;

width: 100%;

height: 100%;

left: 0;

top: 0;

-webkit-mask: url(“data:image/svg+xml,%3Csvg width=“96” height=“91” viewBox=“0 0 96 91” fill=“none” xmlns=“http://www.w3.org/2000/svg”%3E%3Cpath d=“M48 0l11.226 34.55h36.327l-29.39 21.352L77.39 90.45 48 69.098 18.61 90.451 29.837 55.9.447 34.55h36.327L48 0z” fill=”%23C4C4C4"/%3E%3C/svg%3E"), linear-gradient(red, red);

-webkit-mask-size: 50px, 100%;

-webkit-mask-repeat: no-repeat;

-webkit-mask-position: calc(var(–x, .5) * 100% + var(–x, .5) * 100px - 50px )  calc(var(–y, .5) * 100% + var(–y, .5) * 100px - 50px ), 0;

-webkit-mask-composite: xor;   /只显示不重合的地方， chorem 、safari 支持/

mask-composite: exclude; /* 排除，只显示不重合的地方， firefox 支持 */

background: rgba(0,0,0,.3);

backdrop-filter: blur(5px)

}

星星镂空实现效果如下：

d3d415d2c47efd6fc354454c9751414a.gif

完整代码可以查看：https://codepen.io/xboxyan/pen/vYJPaVy

再比如一个心形❤，实现效果如下：

2e68df8b0aac7be0f2caa4082be22758.gif

完整代码可以查看：https://codepen.io/xboxyan/pen/KKvEBjb

只有想不到，没有做不到

七、总结和说明

以上实现了一个鼠标跟随镂空的效果，从简单到复杂，从单一到通用，虽然借助了一点点 JS ，但是仅仅是“工具人”的角色，交互逻辑全部都由 CSS 完成，下面总结一下：

  1. 足够大的阴影是一个实现圆形镂空效果的小技巧

  2. CSS 渐变也能轻易的绘制出圆形镂空背景

  3. 借助 CSS 变量可以很方便的利用鼠标位置实现想要的效果

  4. backdrop-filter 可以想象成磨砂玻璃的功能

  5. CSS Mask 可以给磨砂玻璃打孔，实现镂空的效果

  6. 借助遮罩合成特性和SVG，可以实现任意形状的镂空效果

CSS MASK 还是非常强大的，有必要还是多掌握一下。最后，如果觉得还不错，对你有帮助的话，欢迎点赞、在看、收藏、转发。

作者：XboxYan

https://segmentfault.com/a/1190000040996523

推荐链接

  1. 纯 CSS 自定义多行省略：从原理到实现

  2. 前端程序员简历模板整理和下载

  3. 这才是前端该写的代码：CSS常见套路续

关注公众号 前端开发博客，回复“加群”，秒进群

加入我们一起学习，天天进步

自我介绍一下，小编13年上海交大毕业，曾经在小公司待过，也去过华为、OPPO等大厂，18年进入阿里一直到现在。

深知大多数前端工程师，想要提升技能，往往是自己摸索成长或者是报班学习，但对于培训机构动则几千的学费，着实压力不小。自己不成体系的自学效果低效又漫长，而且极易碰到天花板技术停滞不前！

因此收集整理了一份《2024年Web前端开发全套学习资料》，初衷也很简单，就是希望能够帮助到想自学提升又不知道该从何学起的朋友，同时减轻大家的负担。
img
img
img
img
img
img

既有适合小白学习的零基础资料，也有适合3年以上经验的小伙伴深入学习提升的进阶课程，基本涵盖了95%以上前端开发知识点，真正体系化！

由于文件比较大，这里只是将部分目录大纲截图出来，每个节点里面都包含大厂面经、学习笔记、源码讲义、实战项目、讲解视频，并且后续会持续更新

如果你觉得这些内容对你有帮助，可以添加V获取：vip1024c （备注前端）
img

最后

除了简历做到位，面试题也必不可少，整理了些题目，前面有117道汇总的面试到的题目，后面包括了HTML、CSS、JS、ES6、vue、微信小程序、项目类问题、笔试编程类题等专题。

如果你觉得这些内容对你有帮助，可以添加V获取：vip1024c （备注前端）**
[外链图片转存中…(img-ghVIgfon-1711732721729)]

最后

除了简历做到位，面试题也必不可少，整理了些题目，前面有117道汇总的面试到的题目，后面包括了HTML、CSS、JS、ES6、vue、微信小程序、项目类问题、笔试编程类题等专题。

蛋黄酥呀
关注
  • 14
    点赞
  • 踩
  • 13
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
使用CSS实现中间镂空的图片遮罩效果
09-24
主要介绍了使用CSS实现中间镂空的图片遮罩效果的方法,文中同时附带介绍了一个用CSS3实现的镂空一个圆形的代码示例,需要的朋友可以参考下
CSS实现字体镂空效果、阴影效果、字体阴影效果
m0_62956518的博客
04-25 7823
CSS实现字体镂空效果、阴影效果、字体阴影效果
CSS实现文字镂空效果炫酷背景效果
天渺(喵)工作室
04-09 827
CSS实现文字镂空效果炫酷背景效果css3中有一个mix-blend-mode的screen混合模式，可以轻松实现镂空文字效果。背景我们可以固定定位设置一个静态图片，gif动态图，视频video，svg动画等等。 预期效果
CSS 3之鼠标特效
程序员小白的博客
07-02 853
使用 属性（鼠标指针属性）能实现对鼠标样式的控制； 例子 1： HTML 鼠标样式效果例子2：鼠标放在超链接上，能看到超链接的颜色、背景图片发生变换，且鼠标样式变化
CSS一些样式
hahahaha7551的专栏
05-11 333
Example：CSS鼠标手型效果 CSS鼠标手型效果 Example：CSS鼠标手型效果 CSS鼠标手型效果 注：pointer也是小手鼠标，建议大家用pointer，因为它可以兼容多种浏览器。 Example：CSS鼠标由系统自动给出效果 CSS鼠标由系统自动给出效果 Example：CSS鼠标十字型 效果 CSS鼠标十字型 效果 Example：CSS鼠标I字型效果 CSS鼠标I字
纯css3人物头像鼠标跟随动画效果
07-31
在本文中，我们将深入探讨如何实现“纯CSS3人物头像鼠标跟随动画效果”。这个特效是一种创新的交互设计，通过CSS3的特性，使得人物头像的眼睛或整个头部能够随着鼠标的移动而转动，增强用户体验，给网页增添趣味性。...
css3动画过渡实现鼠标跟随导航效果
09-27
在本文中，我们将深入探讨如何使用CSS3动画过渡来实现一个鼠标跟随的导航效果。这个效果可以增强用户界面的互动性，为网站增添动态视觉吸引力。我们将介绍关键的HTML结构、CSS样式以及涉及的CSS3特性。 首先，HTML...
jQuery+css3实现文字跟随鼠标的上下抖动
10-23
主要介绍了jQuery+css3实现文字跟随鼠标的上下抖动的相关资料,需要的朋友可以参考下
图片半透明圆形镂空遮罩
leveretz的博客
11-13 1260
图片半透明圆形镂空遮罩
css文本镂空效果
最新发布
weixin_64740434的博客
01-25 1077
"../assets//img/夜景.jpg"/* 设置背景只覆盖文字 *//* 文本阴影 */
用纯CSS实现镂空效果的示例代码
12-14
近来研究了一下镂空效果。 background-clip: text 背景被裁剪为文字的前景色。第一次是在 CSS-Tricks 看到的这个用法: 在 CSS-Tricks 网站上，这个玩意用得到处都是。 这样，做简单的图片背景镂空效果便不再困难了。关键代码只有几行。 .wrapper { /* ... */ background-image: url("/path/to/your/image"); background-clip: text; /* ! */ color: transparent; /* ! */ } 就这几行，视觉上会就会有大变化。前后对比： 另外
CSS实现镂空遮罩效果
11-21
前一阵子面试被问题到这个问题，突然懵逼了，脑子一片空白，以前知道这种效果，比如什么值得买的改版引导页面：   当时再紧张也应该打出一种实现方法，就是什么值得买这种使用图片实现   它首先加了一个半透明的黑色蒙层（ background-color: rgba(0,0,0,.8) ）然后添加提前制作好的图片作为子元素，然后通过决定定位，让图片与被遮盖的部分的定位相同，制造出一种假的镂空的效果 虽然这种方式处理定位有一些麻烦，并且不适合页面有滚动的情况，滚动的时候可能出现错位。 但是当时怎么也应该答出这种方式，但是确实一面试就紧张，脑子不转了，就想着添加一个伪元素，但是不知道怎么穿透。 回来查了一
很酷的六种CSS 鼠标经过图片效果（含HTML文件）
11-26
很酷的六种CSS 鼠标经过图片效果（含HTML文件），免费下载地址：http://www.ui3g.com/design/uiweb-466.html
css中间镂空,怎么用纯CSS实现镂空效果
weixin_28938171的博客
08-03 2270
怎么用纯CSS实现镂空效果发布时间：2021-03-19 09:49:16来源：亿速云阅读：99作者：小新小编给大家分享一下怎么用纯CSS实现镂空效果，希望大家阅读完这篇文章之后都有所收获，下面让我们一起去探讨吧！background-clip: text背景被裁剪为文字的前景色。第一次是在 CSS-Tricks 看到的这个用法: 在 CSS-Tricks 网站上，这个玩意用得到处都是。这样，做简...
HTML怎么制作镂空文字遮罩,用纯CSS实现镂空效果的示例代码
weixin_29864831的博客
06-04 446
近来研究了一下镂空效果。background-clip: text背景被裁剪为文字的前景色。第一次是在 CSS-Tricks 看到的这个用法: 在 CSS-Tricks 网站上，这个玩意用得到处都是。这样，做简单的图片背景镂空效果便不再困难了。关键代码只有几行。.wrapper {/* ... */background-image: url("/path/to/your/image");backg...
CSS鼠标动作的五种状态[伪类选择器]
weixin_45203607的博客
04-30 1万+
title: CSS鼠标动作的五种状态[UI元素的伪类选择器] abbrlink: 29618 date: 2020-07-08 12:20:16 author: 胡安民 toc: true top: false cover: false summary: categories: Web reprintPolicy: cc_by keywords: 初始状态link,点击后visited,鼠标悬浮hover,点击后未释放状态active,鼠标聚焦focus,案例实现自定义下内容 tags: CSS .
八大经典优雅的CSS鼠标悬浮动画-hover属性
热门推荐
weixin_62650212的博客
04-02 4万+
相信大家也有为自己做的hover效果不太满意的，本文给大家介绍几款不错的css鼠标悬浮动画，老规矩，复制粘贴即用。 1.
css实现自定义鼠标样式
苏苏就是小苏苏的博客
10-17 3942
1.实现效果 2.实现原理 cursor属性： cursor 属性规定要显示的光标的类型（形状）。 该属性定义了鼠标指针放在一个元素边界范围内时所用的光标形状。 可能的值： 使用url，可自定义鼠标图标。 语法 {cursor:url('图标路径'),default;} eg： * { cursor: url(cur/Handwriting.cur), default; } 注意：不同浏览器对自定义图标的兼容性不一，要设置一个默认的普通图标，如default，pointer等。 3.自定义图标注意点
CSS mask 实现鼠标跟随镂空效果
前端开发博客
02-17 8203
点击下方星标本公众号，实用前端技术文章及时了解偶然在某思看到这样一个问题，如何使一个div的部分区域变透明而其他部分模糊掉？，最后实现效果是这样的：进一步，还能实现任意形状的镂空效果：鼠标...
通过 CSS 和 JavaScript 实现摄像头跟随鼠标移动的效果
05-18
要实现摄像头跟随鼠标移动的效果，可以使用CSS的`transform`属性和JavaScript的`mousemove`事件来实现。 首先，在HTML中创建一个包含摄像头的容器元素，例如： ```html <div class="camera-container"> <video id="camera"></video> </div> ``` 然后，在CSS中设置容器元素的宽度和高度，以及摄像头的位置，例如： ```css .camera-container { position: relative; width: 640px; height: 480px; } #camera { position: absolute; top: 0; left: 0; width: 100%; height: 100%; transform: translate(-50%, -50%); } ``` 这里的关键是将摄像头的位置设置为绝对定位，并使用`transform: translate(-50%, -50%);`将其居中对齐。 接下来，在JavaScript中监听`mousemove`事件，并计算出鼠标相对于容器元素的位置，然后使用`transform: translate()`将摄像头移动到相应的位置。代码如下： ```javascript var cameraContainer = document.querySelector('.camera-container'); var camera = document.querySelector('#camera'); cameraContainer.addEventListener('mousemove', function(event) { var x = event.clientX / cameraContainer.offsetWidth; var y = event.clientY / cameraContainer.offsetHeight; camera.style.transform = 'translate(' + (x * 50 - 25) + '%, ' + (y * 50 - 25) + '%)'; }); ``` 这里使用`event.clientX`和`event.clientY`获取鼠标的坐标，然后将其除以容器元素的宽度和高度，得到相对于容器元素的位置比例。最后使用`transform: translate()`将摄像头移动到相应的位置。 完整的代码示例可以参考下面的代码片段： ``` .camera-container { position: relative; width: 640px; height: 480px; } #camera { position: absolute; top: 0; left: 0; width: 100%; height: 100%; transform: translate(-50%, -50%); } ``` ``` <div class="camera-container"> <video id="camera" autoplay></video> </div> <script> var cameraContainer = document.querySelector('.camera-container'); var camera = document.querySelector('#camera'); cameraContainer.addEventListener('mousemove', function(event) { var x = event.clientX / cameraContainer.offsetWidth; var y = event.clientY / cameraContainer.offsetHeight; camera.style.transform = 'translate(' + (x * 50 - 25) + '%, ' + (y * 50 - 25) + '%)'; }); navigator.mediaDevices.getUserMedia({ video: true }) .then(function(stream) { camera.srcObject = stream; }) .catch(function(error) { console.error(error); }); </script> ``` 注意，这里还使用了`navigator.mediaDevices.getUserMedia()`获取摄像头的视频流，并将其赋值给`<video>`元素的`srcObject`属性，以便显示摄像头的内容。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值