mix-blend-mode

发表于2022-11-16|更新于2026-02-24

|浏览量:

为爱情赌气，就丧心病狂了！——塞万提斯

分享一个好玩的css属性：

mix-blend-mode，MDN

该属性可以将元素和后面的背景进行混合

什么叫混合呢？例如我看到的一个网站：

红框框出来的部分，是鼠标移动上去的一个效果

这个小圈，与后面的图片进行了反色，而且对于不少图片都有类似效果，我一开始以为是用了两张图片做的处理

后来发现并不是，是用的这个css

1	mix-blend-mode: exclusion;

其提供的不只是反色一个选项，还有很多的值，都可以使用

相关推荐

for of和for in

人生而自由，却无往不在枷锁中——卢梭《社会契约论》我之前写过一篇for in的博客 for in是遍历对象key或者数组下标前端还可以使用for of来遍历value 简单写一下两者区别和使用方式吧： 12let ruben = {name:'ruben', age:21}for(key in ruben) console.log(key) 然后是for of 提示对象并不是iterable(可迭代的) 因此for of并不能遍历对象的key 接下来看数组的： 12let list = [1,2,3,4,5,6]for(i in list) console.log(i) 可以看到是遍历获取出了下标并不是实际的值而for of： 12let list = [1,2,3,4,5,6]for(i of list) console.log(i) 遍历出了我们的value

人活在世，不过一场美丽的寄居。——简嫃在前端开发中经常会使用异步方法这里介绍Promise函数定义方式： 12345// Promise内部构造参数为一个闭包，闭包中传入你想要异步处理的逻辑new Promise((resolve,reject)=>{ // 这里resolve表示正常处理异步逻辑后传送回调，reject则是异常逻辑或错误逻辑时执行，当异步方法中抛出异常，会自动调用reject，这里也可以手动调用 resolve(1)}) 然后定义完了，我们就可以开始调用调用写法如下： 12345678new Promise((resolve,reject)=>{ // 假设我这里异步方法处理完后得到的结果为1，我就传入一个1 resolve(1)}).then(res=>{ // 然后异步方法执行完了，我再对结果进行异步处理，让得到的1再加一个1 console.log(res+1)}) 使用then可以执行异步方法后续处理，将异步方法的回调的结果作...

vue-starport跨路由组件共享动画

没有风暴，船帆不过是一块破布。——雨果 vue-starport/README.zh-Hans.md at main · antfu/vue-starport · GitHub 我们经常会在在不同的路由（页面）上使用同一组件，但他们的位置和大小可以不尽相同。这时你可能会希望在用户进行路由跳转时，想让它们展示流畅的过渡动画。尽管这样的动画在原生应用中较为常见，但要在 Web 中实现却有一些挑战。 Vue 的组件结构以树的形式呈现，在不同分支中的子组件有其各自的实例，这意味着当用户在路由之间跳转时，同样的组件并不会跨路由共享。因为它们是两个不同的实例，这意味着你无法直接为它们的添加补间动画。幸运的是，有一种叫做 FLIP 的技术可以模拟不同组件之间的过渡动画。然而，FLIP 只解决了过渡的问题，我们仍然还是会有两个组件实例。在跳转过程中，组件的内部状态将会丢失。因此，我开始实验一个新的解决方案用于满足这一需求，并将其取名为 Starport。在线Demo： https://vue-starport.netlify.app/ 可以看到点击下方的图片...

js截取字符串

就和java的substring一样 12//截取字符串前4位（包前不包后）也就是下标为0,1,2,3的这四位str.slice(0,4)

行动不一定带来快乐，但无行动则决无快乐。——本杰明·富兰克林 Handy：离线、自由、可扩展的语音转写应用，让你的电脑“更懂你”在语音交互逐步成为主流的今天，很多人却因为隐私、网络不稳定或商业限制无法安心使用语音转写。Handy 选择了一条简单直接又极具意义的路线：完全离线的开源语音转写应用。它不仅免费、开源，还强调可扩展与跨平台体验，是个人创作者、隐私敏感场景以及办公环境的一剂良方。项目地址：cjpais/Handy 官网主页：https://handy.computer 项目描述：A free, open source, and extensible speech-to-text application that works completely offline. 主语言：TypeScript License：MIT Stars：8,299+ Forks：555+ 关键词：speech-to-text accessibility cross-platform tauri-v2 为什么是 Handy？完全离线：隐私不外流，内网/弱网环境也能稳定...

css的透视效果perspective

有两件事我最憎恶：没有信仰的博才多学和充满信仰的愚昧无知。——爱默生我们知道css中我们的transform可以调整z轴，这说明css是有3d能力的但是我们通常看一个3d的物体，是近的地方大，远的地方小甚至被遮挡，要实现这样的透视效果其实只需要一个css属性即可 https://developer.mozilla.org/zh-CN/docs/Web/CSS/perspective 就比如这个正方体： .face { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; position: absolute; backface-visibility: inherit; font-size: 60px; color: #fff } .front { background: rgba(90,90,90,.7); transform: translateZ(50px)...

阿超

我的名字叫阿超年龄25岁家在北京市职业是软件开发每天最晚也会在八点前回家不抽烟酒浅尝辄止晚上十二点上床保证睡足八个小时睡前写一篇博客再做二十分钟俯卧撑暖身然后再睡觉基本能熟睡到天亮像婴儿一样不留下任何疲劳和压力就这样迎来第二天的早晨健康检查结果也显示我很正常我想说明我是一个不论何时都追求内心平稳的人不拘泥于胜负不纠结于烦恼不树立使我夜不能寐的敌人这就是我在这社会的生活态度

数据加载中