byzhangxinxufromhttps://www.zhangxinxu.com/wordpress/?p=11430本文可全文转载，独立域名个人网站无需授权，但需要保留原作者、出处以及文中链接，任何网站均可摘要聚合，商用请联系授权。2年前有个中台文档产品有个划词评论的功能，那时候还写了篇文章介绍了相关的技术实现，参见：“划词评论与Range开发若干经验分享”一直运行的好好的。突然，就在最近，老板提了一嘴，这手机上怎么没法划词评论。好了，需求就来了。当时手机上内置的复制、翻译等tips等与划词评论小按钮会有冲突，以及开发成本等原因（台式机模拟touch长按有些麻烦），就没做。简单研究了下，事件是通用的，就是selectionchange事件。一、关于selectionchange事件根据我的测试，selectionchange发生在选区范围发生变化的时候，假如你拖拽选区范围的“棒棒子”改变文本的选中范围，此事件是不断触发的。使用示意：尝试选中这段文字：《HTML并不简单》是目前市面上...document.addEventListener('selectionchange', function () { const selection = document.getSelection(); result.textContent = selection.toStri ...继续阅读 (6)

byzhangxinxufromhttps://www.zhangxinxu.com/wordpress/?p=11424本文可全文转载，独立域名个人网站无需授权，但需要保留原作者、出处以及文中链接，任何网站均可摘要聚合，商用请联系授权。就算每周学习一个前端新特性，我发现我都来不及学习。都没有时间钓鱼了，苦啊。这不，又出了个啥calc-size()函数和interpolate-size属性。没关系，我还学得动，快扶我起来。一、非固定尺寸也能动画calc-size()函数和interpolate-size属性的设计初衷是一致的，就是可以让width、height等尺寸相关的属性即使值是auto，也能有transition过渡动画效果。最具代表性的就是height:auto的过渡动画实现。例如：点击我p { height: 0; transition: height .25s; overflow: hidden; } .active + p { height: auto; height: calc-size(auto, size); }此时，在Chrome 129及其以上版本浏览器下，点击按钮，就可以看到图片以切片动画的形式呈现了，如下GIF动图所示：眼见为实，您可以狠狠地点击这里：CSS calc-size()实现height:auto动画de ...继续阅读 (3)

byzhangxinxufromhttps://www.zhangxinxu.com/wordpress/?p=11418本文可全文转载，独立域名个人网站无需授权，但需要保留原作者、出处以及文中链接，任何网站均可摘要聚合，商用请联系授权。一、趁热打铁gogogo上一篇我们介绍了Pixi.js中的颜色矩阵变换滤镜，接下来，我们趁热打铁，来一起学习下SVG中的colorMatrix滤镜，使用的是这个元素。先从语法说起。支持in,type和values（注意有s）这三个属性，其中，in属性的实际用法都是固定的，值都是SourceGraphic，表示应用滤镜的原始资源。在CSS调用场景中，就是应用该CSS的对应元素。主要是type属性的区别，参见：饱和度变化色调变化发光亮度变化矩阵变化其中，饱和度和色调变化比较简单，这个在CSS中的filter属性中也有对应的滤镜方法，分别是filter:saturate()和filter:hue()，效果是一样的，关键是后面两个滤镜。下面好好说道说道。二、luminanceToAlpha的作用和效果luminanceToAlpha的作用是亮度透明化，白色会完全透明，黑色保持不变，其余黑灰半透明，类似传统胶卷的影印效果。说到亮度，讲一个小tips，就是Luminance亮度和Brightness亮度的区别。前者指的是光源投射在物体表面的发光强度，后者表示物 ...继续阅读 (6)

byzhangxinxufromhttps://www.zhangxinxu.com/wordpress/?p=11393本文可全文转载，独立域名个人网站无需授权，但需要保留原作者、出处以及文中链接，任何网站均可摘要聚合，商用请联系授权。一、背景短视频投放为了有更好的流量推荐，就需要避免重复，以免被系统判定为非原创。这就需要对视频进行去重。常见的手段就是翻转，剪裁，叠加素材等。最近就遇到类似需求，思来想去，其实可以借助算法滤镜对视频的每一帧进行重新处理，这个要比使用其他视频画面1%透明度叠加效率高得多。所以，就去研究了下Pixi.js中ColorMatrixFilter自带的算法滤镜，称为ColorMatrixFilter，就是通过矩阵变换改变画面色彩的滤镜，这个与模糊、马赛克这类滤镜还是有所不同的。我看了下官方文档，有20多个自带的方法，品类倒是挺多，但是却没有对应的效果展示，纯文本，且描述也很简单。这对于新人的学习不太友好，对于我而言，也不利于我选择应该使用哪个滤镜效果。于是，我就花时间整了个演示demo，大家可以看到每个滤镜大致的效果。二、演示您可以狠狠地点击这里：Pixi中ColorMatrixFilter各个滤镜方法效果demo大家可以滑动滑杆调整参数，感受不同的效果。ColorMatrixFilter使用示意使用contrast()示意下如何使用ColorMatrixF ...继续阅读 (5)

byzhangxinxufromhttps://www.zhangxinxu.com/wordpress/?p=11387本文可全文转载，独立域名个人网站无需授权，但需要保留原作者、出处以及文中链接，任何网站均可摘要聚合，商用请联系授权。一、Object.is和===的区别Object.is()静态方法可以比较两个对象是否严格相等，在绝大多数情况下，和三等于号===的作用是一样的。除了下面两种情况：1. NaN的比较如果使用等于好比较，则NaN和NaN的返回结果是false：NaN === NaN // false但使用Object.is()比较则返回的是true：Object.is(NaN, NaN) // true2. +0和-0的比较一句话，=== 是认为相等的，而Object.is()认为是不相等的，代码示意：+0 === -0 // true Object.is(+0, -0) // false二、数组at方法和直接索引的区别已知一个数组arr = [1,2,3]，则下面两种写法均等返回数组的第二项内容：const arr = [1,2,3]; console.log(arr.at(1), arr[1]); // 返回结果：2 2那问题来了，数组使用at()方法获取选项，和直接使用索引获取有什么区别呢？区别就在于参数或索引值为负数的时候，直接看例子：const arr ...继续阅读 (10)

byzhangxinxufromhttps://www.zhangxinxu.com/wordpress/?p=11377本文可全文转载，独立域名个人网站无需授权，但需要保留原作者、出处以及文中链接，任何网站均可摘要聚合，商用请联系授权。一、姗姗来迟的支持先看兼容性图表📈：可以看到，@property规则Chrome在2020年的时候就支持了，而Safari浏览器姗姗来迟，2023年才支持，目前已经进入可以再生产环境使用的阶段（对兼容性要求不是那么严苛的项目）。@property规则属于CSS Houdini中的一个特性，可以自定义CSS属性的类型，这个特性在现代CSS开发中还是很有用的，最具代表性的例子就是可以让CSS变量支持动画或过渡效果。二、“变量种子计数器”的升级在19年的时候，我曾提过使用“变量种子计数器”来颠覆现有的CSS动画实现方式。传统的CSS动画都是一个动画定义一个 @keyframes，但如果动画类型多，那页面就会有多个不同类型的@keyframes，代码就会很啰嗦。而使用这里的“变量种子计数器”，所有的动画都可以使用唯一的一个@keyframes动画规则解决。详见文章：“使用‘变量种子计数器’扩展CSS动画更多可能性”但是，之前受制于浏览器的显示，其@keyframes规则是使用枚举的方式实现的，例如（中间部分代码省略）：@keyframes seed { ...继续阅读 (11)

byzhangxinxufromhttps://www.zhangxinxu.com/wordpress/?p=11363鑫空间-鑫生活本文欢迎分享与聚合，全文转载就不必了，尊重版权，圈子就这么大，若急用可以联系授权。一、CSS又更强了一点好消息，时隔两年，原本仅Safari浏览器支持的mod()/rem()/round()现在Chrome浏览器也支持啦。mod()函数CSS mod()函数返回第一个参数除以第二个参数的取模结果，类似于JavaScript余数运算符（%）。使用示意：/* 数值，无单位 */ line-height: mod(7, 2); /* 1 */ line-height: mod(14, 5); /* 4 */ line-height: mod(3.5, 2); /* 1.5 */ /* 百分比或者带单位的尺寸 */ margin: mod(15%, 2%); /* 1% */ margin: mod(18px, 4px); /* 2px */ margin: mod(19rem, 5rem); /* 4rem */ margin: mod(29vmin, 6vmin); /* 5vmin */ margin: mod(1000px, 29rem); /* 72px - 如果根字号是16px */ /* 正负值 */ rotate: mod(100deg ...继续阅读 (50)

byzhangxinxufromhttps://www.zhangxinxu.com/wordpress/?p=11357本文可全文转载，独立域名个人网站无需授权，但需要保留原作者、出处以及文中链接，任何网站均可摘要聚合，商用请联系授权。一、原生分组方法Object.groupBy()好消息，所有现代浏览器都已经支持浏览器原生的静态方法Object.groupBy()了，如下图所示，Safari浏览器支持最晚，今年4月份才开始支持。这就意味着最晚明年，就算不使用Polyfill代码，也能在生产环境使用该方法了。作用Object.groupBy()可以让可枚举对象，根据某个键进行自动分组。例如：const data = [{ id: 1, name: '张三' }, { id: 3, name: '李四' }, { id: 4, name: '王二' }, { id: 2, name: '张三' }]; const result = Object.groupBy(data, ({ name}) => name); console.log(result);输入结果则是：{张三: Array(2), 李四: Array(1), 王二: Array(1)} 张三: Array(2) 0: {id: 1, name: '张三 ...继续阅读 (18)

byzhangxinxufromhttps://www.zhangxinxu.com/wordpress/?p=5474本文可全文转载，独立域名个人网站无需授权，但需要保留原作者、出处以及文中链接，任何网站均可摘要聚合，商用请联系授权。一、普大喜奔好消息好消息，实现元素垂直居中对齐终于有了专门的CSS属性，就是之前Flex布局和Grid布局中使用的align-content属性，现在已经可以在普通的block块级元素中使用啦！案例演示例如，有如下CSS和HTML代码：《HTML并不简单》这本书不错感谢正版支持《CSS新世界》ul { height: 150px; border: solid; align-content: center; }此时的渲染效果如下图所示，真就垂直居中了。我只能说——Nice！二、自然也支持居底因为支持的是align-content属性，并不仅仅是某一个属性值，因此，普通元素内的居底效果，也是轻松支持的，例如下面的柱状图实现效果：.box { height: 200px; border-bottom: 1px solid; border-left: 1px solid; align-content: end; } .bar { display: inline-block; width: 1 ...继续阅读 (22)

byzhangxinxufromhttps://www.zhangxinxu.com/wordpress/?p=11347本文可全文转载，独立域名个人网站无需授权，但需要保留原作者、出处以及文中链接，任何网站均可摘要聚合，商用请联系授权。一、这个特性期待已久了之前处理滚动行为的时候，由于滚动事件的触发太频繁，所有，都会用setTimeout优化处理。现在，浏览器支持了scrollend事件，就不需要那么麻烦了。目前Firefox和Chrome浏览器已经原生支持，Safari的话还是需要老代码polyfill下（本文后面会有展示）。效果体验只要你不是Safari浏览器（手机不是iPhone），均可以滚动下面这个iframe内嵌容器，体验scrollend效果。如果仅触摸，但是未发生滚动，scrollend事件是不会发生的。二、使用方法和兼容使用方法和scroll事件一致，可以在普通DOM元素上，也可以设置在全局的window的窗体对象上。例如：window.addEventListener("scrollend", (event) => { // 滚动结束 }); element.addEventListener("scrollend", (event) => { // 滚动结束 });Polyfill 和渐进式增强目前Safari浏览器还未支持，因此，生成环境还需要额外一 ...继续阅读 (19)

byzhangxinxufromhttps://www.zhangxinxu.com/wordpress/?p=11330本文可全文转载，独立域名个人网站无需授权，但需要保留原作者、出处以及文中链接，任何网站均可摘要聚合，商用请联系授权。SVG中有多个与光源相关的滤镜，看起来有些小复杂，今天就好好学一学，想办法都弄懂了，说不定哪一天就用到了。一、fePointLight滤镜顾名思义就是点光源滤镜效果。和很多其他光源滤镜一样，要想生效，需要用在照明过滤器元件中。所谓的照明过滤器，在SVG中，其实指的是和这两个元素。前者指的漫反射，后者指的镜面反射。其实，SVG光源滤镜就是那么回事，一是确定光源的类型，是点光（灯泡）、平行光（太阳），还是聚光（聚光灯），二是确定物体表面发射的类型，是漫反射还是镜面反射，这些初中还是高中物理应该都讲过的。好，为了方便学习，有必要先学习和这两个元素。二、以feSpecularLighting元素举例先从案例开始说起吧。使用feSpecularLighting，也就是镜面反射源实现一个点光照射的按钮效果吧。相关SVG代码如下所示（复制到页面任意位置）：然后给需要应用该滤镜效果的元素使用CSS代码就可以了，例如：button { filter: url(#spotlight); }此时，按钮的左上角就可以看到光照特效了。如下图效果所示：眼见为实，您可以狠狠 ...继续阅读 (46)

byzhangxinxufromhttps://www.zhangxinxu.com/wordpress/?p=11318本文可全文转载，独立域名个人网站无需授权，但需要保留原作者、出处以及文中链接，任何网站均可摘要聚合，商用请联系授权。生命不停，学习不止，CSS滚动动画出来已经有1年了。Safari浏览器到现在还没有支持，如下图所示：但是我已经等不及了，很多人都已经开始在生产环境使用这个新特性了，我也不能落后，学起来，不要管Safari了。然后，滚动动画需要的CSS属性不仅是scroll-timeline、view-timeline，animation-timeline属性也是需要的，这也是CSS新特性，会在本文一同介绍。好，开始吧。一、温故而知新其实滚动动画我很多年前也近似实现过，让我找找……哦，找到了，CSS实现滚动指示器，效果如下GIF示意（注意上边缘的）。详见“更好的纯CSS滚动指示器技术实现”一文。现在有了原生的CSS滚动动画，滚动指示器的实现那就简单多了。代码如下所示：.scroller { height: 200px; border: 1px solid; overflow: auto; scroll-timeline: --indicator; } .scroller ins { display: block; bo ...继续阅读 (31)

byzhangxinxufromhttps://www.zhangxinxu.com/wordpress/?p=11308本文可全文转载，独立域名个人网站无需授权，但需要保留原作者、出处以及文中链接，任何网站均可摘要聚合，商用请联系授权。一、先从最简单的案例开始本文介绍View Transitions API，可以实现类似Keynote里面神奇移动这样的动画效果，也即是浏览器自动识别场景1和场景2的不同，并让这个不同产生动画效果，特别适合复杂的页面级别的场景切换动画。先从最简单的案例开始。一、append图片淡出动画传统方法实现页面插入一个图片并有动画效果，需要用到CSS3 animation定义，例如：img { animate: fadeIn .2s both; } @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }container.append(img);而实现View Transitions API实现则是另外的风格，只需要JS代码，这样：document.startViewTransition(() => { container.append(img); });此时图片插入就有淡出效果了，如下视频所示（不动点击播放）：就是这么简单。眼见为实，您可以狠狠地点击这里：startV ...继续阅读 (36)

byzhangxinxufromhttps://www.zhangxinxu.com/wordpress/?p=11293本文可全文转载，独立域名个人网站无需授权，但需要保留原作者、出处以及文中链接，任何网站均可摘要聚合，商用请联系授权。一、需求背景希望特效音可以有淡入淡出效果，同时能够在视频合成的时候体现在音轨中。二、播放淡入淡出先讲下偏浅层应用的技术实现，那就是播放淡入淡出。1. 使用howlerjs实现howlerjs这个项目（https://github.com/goldfire/howler.js）我多次提到过，凡是音频播放的需求（除了那种简单的点击播放），无需任何迟疑，也不用考虑其他，就是要howlerjs。两三万Star的项目，品质保证。下面演示下如何实现。假设页面上有个按钮，点击按钮播放某音频，HTML示意：点击播放则下面几行JavaScript代码可以实现音频播放淡入，结束淡出的效果。const url = './htmlbook.wav'; const sound = new Howl({ src: [url] }); // 点击按钮，音频淡入淡出播放 button.onclick = function () { sound.play(); sound.fade(0, 1, 1000); setTimeout(() => { ...继续阅读 (41)

byzhangxinxufromhttps://www.zhangxinxu.com/wordpress/?p=11275本文可全文转载，独立域名个人网站无需授权，但需要保留原作者、出处以及文中链接，任何网站均可摘要聚合，商用请联系授权。前言盼星星，盼月亮，我的第5本书《HTML并不简单》已经正式上架了。这本书是围绕HTML这门语言展开的，可以说是市面上唯一一本专讲HTML的书籍。而HTML诞生至今已有30多年，为何鲜有专门介绍这门语言的书籍呢？一方面是商业原因，另一方面则是从业人员对HTML的积累不足以撑起一本书籍的体量。作为一个学习门槛低，收益周期长的语言，很少有人会花大量的时间在这门语言的研究上。但我是个例外，工作至今已有15年，一直在一线开发，一直没有停止对前端基础语言的研究与学习，使得自己的知识储备足够支撑起一本干货满满，细节丰富，深入浅出的HTML书籍。可以说，如果不是阅读了本书，很多实用的前端知识你恐怕这辈子都不会知道。为什么会想到写HTML的书？其实，我和出版社的编辑大大们都心知肚明，在Web前端岗位日趋饱和的当下，纸质书日益衰落的如今，出版一本很多人并不在意的书籍的小众领域的书籍，其实风险还是挺大的。但是，有些事情终归是要有人做的，如果凡事都向功利看齐，小到行业发展，大到国家建设，怎么才能真正强大起来呢？毕竟，这个世界还有不少真正热爱学习，热爱技术，对自我成长有要 ...继续阅读 (33)

byzhangxinxufromhttps://www.zhangxinxu.com/wordpress/?p=11282本文可全文转载，独立域名个人网站无需授权，但需要保留原作者、出处以及文中链接，任何网站均可摘要聚合，商用请联系授权。一、前前前言生命不息，学习不止。本周实操一下CSS Custom Highlight API。首先，Firefox浏览器最近也支持了上述API，至此，现代浏览器完成了大统一，可以学起来了。这个API虽然以CSS开头，但是要实际应用，需要对JavaScript有一定积累的开发人员才能驾驭。不过好的是什么呢，其几个经典的应用场景，例如搜索高亮（MDN文档有案例，见下图1），或者源代码高亮（这里有案例，见下图2），相关的JS代码都是固定的，大家直接复制粘贴就可以使用了。历史经验告诉我，外面的站点都不靠谱，过个5年10年的，这些地址都不能访问了，所以，我做了个备份地址，以备不时之需。分别参见：CSS Highlight API文本高亮搜索demoCSS Custom Highlight API实现代码高亮demoOK，下面开始正式介绍如何自DIY一个文本高亮效果。二、文本高亮四步骤实现CSS纯文本高亮需要下面四步：创建Range对象（使用JS）；使用第一步创建的range创建Highlight对象（使用JS）；使用HighlightRegistry方法注册 ...继续阅读 (37)

byzhangxinxufromhttps://www.zhangxinxu.com/wordpress/?p=11261本文可全文转载，独立域名个人网站无需授权，但需要保留原作者、出处以及文中链接，任何网站均可摘要聚合，商用请联系授权。一、calc()函数支持的新关键字CSS在不断发展，除了新支持了若干数学函数之外，还支持了一些数学关键字，且这些关键字和JavaScript中的关键字神似。包括：elog常量，约等于：2.7182818284590452354.pi圆周率，约等于：3.1415926535897932.infinity&-infinity无穷大和无穷小NaN表示非数值。其中，e和pi比较容易理解，我们可以借助这些常量和特性数学函数实现缓动或正余弦函数动画效果（可以是可以，但比较牵强），这个后面会有案例。需要花些时间了解的是infinity这个关键字。二、了解infinity关键字及其应用先看一个案例，已知有如下HTML和CSS代码，请问对话框元素的上下堆叠顺序依次是多少？1234.a { z-index: 99999999; } .b { z-index: calc(1 / 0); } .c { z-index: calc(infinity + 1); } .d { z-index: calc(infinity * 1); }大家可以思考下。.... ...继续阅读 (44)

byzhangxinxufromhttps://www.zhangxinxu.com/wordpress/?p=11252本文可全文转载，独立域名个人网站无需授权，但需要保留原作者、出处以及文中链接，任何网站均可摘要聚合，商用请联系授权。一、时代变了某些没变Safari啊Safari，唉，不知道说什么才好。最近做项目，又遇到了近Safari才会出现的问题，拖拽元素的时候有奇怪的残影。包括之前也有很多问题，也都是Safari下才会出现的。所以，就出现了对Safari专门处理下的需求。我查了一下，居然没有专门匹配Safari的CSS的资料介绍，那就自己撸一个吧。二、使用@supports规则进行识别有些CSS特性如果Safari并不支持，但是其它浏览器支持，或者有些特性仅Safari支持，但其它浏览器并不支持，均可以用做Safari识别。我大致看了下，可以是这样的：@supports not (background: paint(xxx)) { button { color: red; } }可以非常安全地匹配iOS Safari浏览器：第2种方法：@supports (image-rendering: optimizeSpeed) { /* Safari 和 Firefox浏览器 */ }上面的代码适用于不需要管Firefox浏览器的场景。第3种方法：@suppo ...继续阅读 (50)

byzhangxinxufromhttps://www.zhangxinxu.com/wordpress/?p=11245本文可全文转载，独立域名个人网站无需授权，但需要保留原作者、出处以及文中链接，任何网站均可摘要聚合，商用请联系授权。一、现状描述有一个元素设置了display:none隐藏，然后使用JS让其实现的时候，希望同时有透明度变化的动画效果，使用transition属性是无效的。如下代码示意：占位内容.element { display: none; opacity: 0; transition: .2s; } .element.active { display: block; opacity: 1; }// 让元素显示 element.classList.add('active');此时元素是突然显示，而不是有透明度动画。在之前，有两种方法：元素先显示，透明度保持0，然后在下一个渲染绘制执行设置透明度为1.使用CSS animation动画，代码参见：.element.active { display: block; animation: fadeIn .2s both; } @keyframes { from { opacity: 0; } to { opacity: 1; } }不过上面两种方法都比较麻烦，不如直接一个trans ...继续阅读 (45)

byzhangxinxufromhttps://www.zhangxinxu.com/wordpress/?p=11215本文可全文转载，独立域名个人网站无需授权，但需要保留原作者、出处以及文中链接，任何网站均可摘要聚合，商用请联系授权。一、新的王牌特性Chrome 125已经正式支持CSS锚点定位了，至此，我们可以使用纯CSS实现绝对定位元素A相对于任意锚点元素B的定位效果了，过去那些使用JS实现的浮层效果均有了更好的实现方式。下面赶快一睹为快吧。二、先从最简单的案例开始一个按钮，一张图片。在过去，希望点击按钮让图片在按钮的下边缘对齐显示，要么有DOM结构限制，要么借助JS。DOM结构限制示意：按钮但是现在，直接CSS就可以了，DOM结构可以非常随意。例如有如下HTML和CSS代码：按钮.trigger { anchor-name: --my-anchor; } .target { position: absolute; position-anchor: --my-anchor; left: anchor(left); top: anchor(bottom); margin-top: .5rem; }我们就可以得到如下图所示的定位效果了：并且这种定位效果是实时的，也就是我们改变按钮的位置，下面的图片会自动跟随。我专门做了个演 ...继续阅读 (54)

byzhangxinxufromhttps://www.zhangxinxu.com/wordpress/?p=11213本文可全文转载，独立域名个人网站无需授权，但需要保留原作者、出处以及文中链接，任何网站均可摘要聚合，商用请联系授权。一、好不好用过才知道HTML5元素使用showModal()显示的时候，自动层级最高，自动居中，自动有黑色蒙层，明显就比使用show()方法或者设置open属性显示弹框要好。于是，就在前段时间，对于LuLu UI Edge主题的弹框组件，我就进行了大刀阔斧的修改，让弹框的显示均采用showModal()方法（通过劫持open属性实现）。修改完了自我感觉良好，但是真的实践之后，痛苦的事情来了，由于dialog元素顶层了，因此，自定义的验证提示，浮动定位，toast提示等，全都无法显示，因为这些组件的元素创建都是在body元素下的，由于弹框层级顶级，因此，这些组件样式被覆盖地死死的，用户根本就看不到。唯一的方法就是让toast元素，浮层元素全都append到元素中，这实在是太麻烦了。于是，没办法，妥协，仅alert和confirm类型的弹框使用showModal()显示，其他类型的弹框还是传统的show()方法显示，使用JavaScript进行层级控制。可见，看起来很棒的特性真正使用，可能并没有想的那么好。就像找对象一样，看起来长得漂亮身材又好，真正相 ...继续阅读 (49)

byzhangxinxufromhttps://www.zhangxinxu.com/wordpress/?p=11200本文可全文转载，独立域名个人网站无需授权，但需要保留原作者、出处以及文中链接，任何网站均可摘要聚合，商用请联系授权。一、故事的背景故事的背景是这样的，前段时间，有位同行咨询了我这么个问题：大佬，请教一下，css有没有办法在不增加dom元素的情况下，将一个元素的样式 copy多一个出来？像这样，是两个如下图所示：然后这是后续的对话：已经没有年轻时勤奋的我后来也没有去化时间调试。没想到，过了几日，这位同行说自己使用SVG滤镜搞定了，还发过来的示意demo。啧啧啧，这明显一看就是个人才。然后，最近不是在重新系统学习SVG的滤镜嘛，正好其中用到的最关键的代码就是feMerge和feMergeNode元素，因此，就决定，以此需求为案例，给大家讲讲这两个滤镜元素的语法和作用。二、关于feMerge滤镜SVG中的元素允许同时应用多个滤镜效果，而不是按顺序应用。最终效果的实现需要借助子元素，而的输入内容是其他滤镜执行的result结果，或者是内置的输入关键字，如最常用的SourceGraphic，表示应用滤镜的原始资源，在CSS中应用SVG滤镜的话，SourceGraphic就表示应用该CSS的HTML元素。feMerge的MDN文档提供了一个案例，其实基本上就是上面DOM样式 ...继续阅读 (48)

byzhangxinxufromhttps://www.zhangxinxu.com/wordpress/?p=11187鑫空间-鑫生活本文可全文转载，独立域名个人网站无需授权，但需要保留原作者、出处以及文中链接，任何网站均可摘要聚合，商用请联系授权。一、开门见山先看实现在Web上实现图片的马赛克效果最简单的做法就是借助SVG滤镜。操作很简单，页面任意位置粘贴如下所示的SVG代码：然后再给需要应用马赛克效果的地方使用如下所示的CSS代码即可：img { filter: url(#mosaic); }案例示意例如，有一张如下所示的原始图：在应用上述滤镜效果后：如果看不到效果，您可以狠狠地点击这里体验：feMorphology滤镜实现图片马赛克效果demo二、实现原理详解对SVG滤镜作用，以及这里是如何生效不感兴趣的可以跳过，直接看第三段，不使用SVG滤镜实现图片的马赛克效果。feFlood是用来添加覆盖层和透明度的，支持flood-color和flood-opacity这两个属性，如果不设置这两个属性值，那么就会以纯黑色代替。所以下面这行代码的意思是：创建一个坐标(4,4)，宽高都是2的黑色方形点点。feComposite是用来混合两个输入图像效果的，有点类似于遮罩相关的子属性mask-composite属性，可以决定两个输入图像重叠部分是如何显示的，交集隐藏，还是非交集隐藏，还 ...继续阅读 (51)

byzhangxinxufromhttps://www.zhangxinxu.com/wordpress/?p=11182鑫空间-鑫生活本文欢迎分享与聚合，全文转载就不必了，尊重版权，圈子就这么大，若急用可以联系授权。一、没想到吧，还是SVG滤镜今天继续SVG滤镜的学习，不过直接从实用的案例出手。先看效果。您可以狠狠地点击这里：使用feMorphology滤镜改变文字的粗细胖瘦demo在我的1倍屏显示器下的效果如下所示：尤其是其中的变细效果，在Web中是比较难实现的。文字变粗，除了可以使用font-weight属性设置加粗，还可以使用text-shadow投影属性模拟。但是对于变细，据我所知，只能使用CSS描边属性近似模拟，在“-webkit-text-stroke文字描边CSS属性及展开”一文中对此技术有相关介绍。不过使用-webkit-text-stroke让文字变细，需要背景色是纯色，使用场景有限。但是这里即将要介绍的SVG方法，则不会有此问题，可谓是最佳的文字变细的技术实现。二、文字变细是如何实现的？使用的是SVG的feMorphology滤镜。具体代码如下所示，首先在页面中插入一个仅包含SVG滤镜定义的元素，如下所示：然后，我们就可以按照正常的CSS和HTML代码进行处理了，相关代码如下所示：data { font-size: 2.5rem; } .erode { ...继续阅读 (56)

byzhangxinxufromhttps://www.zhangxinxu.com/wordpress/?p=11175鑫空间-鑫生活本文欢迎分享与聚合，全文转载就不必了，尊重版权，圈子就这么大，若急用可以联系授权。一、需求产生的背景之前有撰文（使用JS快速获取video视频任意位置的缩略图）介绍过纯前端获取视频的截图，按照每秒获取一张的频率去获取，性能还是可以的。但是，怪事发生了，最近几个版本的Chrome不知道改动了什么东西，使用元素获取视频缩略图的性能变得极差，注意这里的副词，是“极”，区别非常明显。这可就非常影响用户体验了。当然，也不是没有解决方法，那就是使用mp4box.js加WebCodecs去解码，但是，这个方法门槛有点高，很多前端小伙伴是玩不转的。所以就想着，要不缩略图就不实时获取了，直接写个Node.js服务，线下提前跑任务生成好就好了。于是就有了这次的需求。二、不哔哔直接上代码如何安装 node-fluent-ffmpeg 我这里就不啰嗦了，安装失败自己想办法哈。假设已经新建了一个名为temp的临时文件夹，用来存放缩略图。const ffmpeg = require("fluent-ffmpeg"); // 每间隔2秒截取缩略图 const videoPath = './sources/zhangxinxu.mp4'; console.log('正在获取视频 ...继续阅读 (66)

byzhangxinxufromhttps://www.zhangxinxu.com/wordpress/?p=11166鑫空间-鑫生活本文欢迎分享与聚合，全文转载就不必了，尊重版权，圈子就这么大，若急用可以联系授权。一、写在开头的絮絮叨今天周日在家，本来想去钓鱼的，临出门，又不想了，唉……连续钓鱼，啥产出都没有，有负罪感，钓鱼都不开心。算了，既然不愿意，何必勉强自己，虽然今天的天气非常时候钓鱼，阴天，温度稳定，全天鱼口都不算，买的红虫怕是也要浪费了。所以，开始打开电脑学习，写作吧。打开文档，快速过了一边，看看还有什么自己不知道的，再评估下学习难度，嗯……目前这个阶段比较适合学习的是feGaussianBlur和feDropShadow这两个滤镜元素，因为都是静态效果，也就是不需要和其他元素发生交集就能有效果。好，抓紧时间，看看能不能今天把这篇文章给撸出来。二、先说说feGaussianBlur元素看名字就知道是实现高斯模糊效果的。其支持如下三个HTML属性：inin是很多滤镜元素都有的属性，表示输入元素（或滤镜应用结果），并非必须使用的属性，在本文，暂时可以忽略此属性，之后会专门介绍。stdDeviationstdDeviation是 standard deviation 的缩写，表示标准偏差，实际效果是高斯模糊的大小。例如下面这段SVG示意代码：实时效果如下所示：edgeMod ...继续阅读 (66)

byzhangxinxufromhttps://www.zhangxinxu.com/wordpress/?p=11158鑫空间-鑫生活本文欢迎分享与聚合，全文转载就不必了，尊重版权，圈子就这么大，若急用可以联系授权。一、前言SVG滤镜元素我之前有深入介绍过两个，一个是feTurbulence滤镜，另外一个是feDisplacementMap滤镜，前者可以用来模拟自然效果，后者可以实现元素形变，都是SVG滤镜比较高级的应用。最近，正好无所事事，就决定查漏补缺，把SVG滤镜元素整个都过一遍，系统了解下，让对这一块的了解更加扎实，说不定以后就用到，提前做技术储备。先从比较简单的元素开始。二、feBlend元素的作用和语法feBlend元素是SVG中用来实现混合模式的元素。在CSS中，混合模式使用mix-blend-mode和background-blend-mode属性实现，在Canvas中使用globalCompositeOperation语法实现。在SVG中就是元素。支持的属性元素支持三个属性，分别是：in输入元素1，混合模式的底层图形或元素。in2输入元素2，混合模式的上层图形元素。mode混合模式的类型。其支持的值和CSS混合模式的值是一样的。包括：mix-blend-mode: normal; //正常 mix-blend-mode: multiply; ...继续阅读 (64)

byzhangxinxufromhttps://www.zhangxinxu.com/wordpress/?p=11144鑫空间-鑫生活本文欢迎分享与聚合，全文转载就不必了，尊重版权，圈子就这么大，若急用可以联系授权。一、居然还有个CSS嵌套年前有介绍CSS @scope规则，可以实现CSS的选择器内外嵌套，简化选择器的书写：@scope(nav) { ul { list-style: none; padding: 0;margin: 0; } li { display: inline-block; } a { display: block; padding: 6px 12px; text-decoration: none; background: skyblue; } }最近发现，几乎同一时间，现代浏览器还支持了专门用来嵌套书写的CSS Nesting语法，借鉴自Sass/Less/Stylus等预编译语言。使用示意：nav { ul { list-style: none; padding: 0; margin: 0; } li { display: inline-block; } a { display: block; padding: 6 ...继续阅读 (76)

byzhangxinxufromhttps://www.zhangxinxu.com/wordpress/?p=11142鑫空间-鑫生活本文欢迎分享与聚合，全文转载就不必了，尊重版权，圈子就这么大，若急用可以联系授权。一、作用简述Chrome 110开始支持CSS initial-letter属性了。initial letter的意思就是首字母，其作用是设置首字母的可以占据多少行文本的高度。是这样的，在英文排版中，经常会有首字母放大的效果，在过去，都是通过::first-letter伪元素和font-size属性实现。📢日前，国务院办公厅印发《关于坚定不移推进长江十年禁渔工作的意见》。《意见》强调...p::first-letter { font-size: 350%; }但是这个实现有个问题，那就是首字母的排版很糟糕，由于只能占据一行内联元素的高度，因此，要么上面不对齐，要么下面空白间隙大，如下图所示：因此，::first-letter只能用在单行内容中，这样不会影响排版，例如价格中的羊角符号的放大（演示页面访问这里）。¥399.price:first-letter { margin-right: 5px; font-size: xx-large; vertical-align: -2px; }initial-letter为多行文本而生而这里的ini ...继续阅读 (51)

byzhangxinxufromhttps://www.zhangxinxu.com/wordpress/?p=11135鑫空间-鑫生活本文欢迎分享与聚合，全文转载就不必了，尊重版权，圈子就这么大，若急用可以联系授权。一、阻止屏幕黑屏休眠之前做PPT录制的时候，一个电脑显示台词，一个电脑录制，然后显示台词的那个电脑没几分钟就黑屏，烦不胜烦，没办法，就打开一个视频，窗口小小的，也就是画中画模式，今天才发现，原来不久前，Chrome和Safari浏览器都支持了名为Screen Wake Lock的API，可以设置Web网页打开的状态下，显示器屏幕不会自动休眠。根据我查找的资料显示，美国知名烹饪网站 Betty Crocker 实现 Screen Wake Lock API 后， 发现其用户的购买意愿指标增加了 300%。如需了解详情，请参阅 🍰? Betty Crocker 案例研究。这还真是意外，居然还可以增加产品的直接收益。不过应该只对特定网站有用，像是做饭的网站，用户做菜的时候，肯定是希望网页一直亮着的，因为要时不时看，所以，收益才这么明显。如果是传统的社交网站应该作用就一般了，不知道小说阅读类网站的收益如何……这个之后再议，当下我就有一个需求场景，某项目介绍页面，进入演讲模式的时候，一定是不能息屏的。就可以使用这里的Screen Wake Lock API了。二、屏幕唤起锁定A ...继续阅读 (66)