mix-blend-mode
发表于|更新于
|浏览量:
为爱情赌气，就丧心病狂了！——塞万提斯
分享一个好玩的css属性：
mix-blend-mode，MDN
该属性可以将元素和后面的背景进行混合
什么叫混合呢？例如我看到的一个网站：
红框框出来的部分，是鼠标移动上去的一个效果
这个小圈，与后面的图片进行了反色，而且对于不少图片都有类似效果，我一开始以为是用了两张图片做的处理
后来发现并不是，是用的这个css
1 | mix-blend-mode: exclusion; |
其提供的不只是反色一个选项，还有很多的值，都可以使用
相关推荐
2025-02-27
animejs简单示例
乖孩子的路，疯子的路，五彩的路，浪荡子的路，任何的路。——杰克·凯鲁亚克的《在路上》 GitHub - juliangarnier/anime: JavaScript animation engine https://animejs.com/ 使用Anime.js这个强大的JavaScript动画库来实现一个简单的动画效果。我们将通过一个示例代码来展示如何使用Anime.js使一个div元素从透明变为不透明，并且从左向右移动50像素。 示例代码下面是我们的完整HTML代码： 1234567891011121314151617181920212223242526272829303132<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <style> body { back...
2025-05-13
wangeditor自定义事件踩坑记录
任何职业都不简单，如果只是一般地完成任务当然不太困难，但要真正事业有所成就，给社会做出贡献，就不是那么容易的，所以，搞各行各业都需要树雄心大志，有了志气，才会随时提高标准来要求自己。 —— 谢觉哉 文档： https://www.wangeditor.com/v5/toolbar-config.html#%E8%87%AA%E5%AE%9A%E4%B9%89%E4%BA%8B%E4%BB%B6 今天踩坑发现会重复触发，哪怕是使用的 1editor.once('event-key', fn) once只监听一次的，也会在一些情况下重复触发。。。
2025-12-12
Handy
行动不一定带来快乐，但无行动则决无快乐。——本杰明·富兰克林 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？ 完全离线：隐私不外流，内网/弱网环境也能稳定...
2021-07-25
uniapp阻止navigator冒泡
作为一个人，要是不经历过人世上的悲欢离合，不跟生活打过交手仗，就不可能懂得人生的意义。——杨朔 代码如下 1234567891011121314151617181920212223242526272829303132333435<template> <view> <view class="navigators"> <view class="parent-navigator" @tap="parentEvent()"> 上层，打印语句 <navigator class="child-navigator" url="/pages/test/test">内层，回到/pages/test/test页面</navigator> </view> </view> </view></template><script>export defau...
2023-04-11
Neumorphic Elements
与智者同行，必得智慧；与愚者相伴，必定无益处。——大卫王 分享一些前端漂亮的小组件 https://codepen.io/myacode/pen/PoqQQNM 效果还是非常惊艳的
2022-06-29
konva实现双击编辑富文本
那一天我二十一岁，在我一生的黄金时代，我有好多奢望。我想爱，我想吃，我想在一瞬间变成天上半明半暗的云。——《黄金时代》 完整代码放到了：https://gitee.com/VampireAchao/simple-konva-html 主要是这个文件 https://gitee.com/VampireAchao/simple-konva-html/blob/master/richtext-dragable.html 思路来源：https://konvajs.org/docs/sandbox/Rich_Text.html 主要思路： 1.双击时创建(我这里是隐藏显示再定位)富文本dom节点 2.通过htmlToCanvas转换html为canvas 3.使用Konva.Image渲染 效果还是蛮不错的，能做polotno的类似案例