Everything you care about in one place
Follow feeds: blogs, news, RSS and more. An effortless way to read and digest content of your choice.
Get Feederzhangxinxu.com
张鑫旭-鑫空间-鑫生活
Get the latest updates from 张鑫旭-鑫空间-鑫生活 directly as they happen.
Follow now 171 followers
Latest posts
Last updated 10 days ago
全新的CSS相对颜色语法-使用from和calc()
10 days ago
by zhangxinxu from https://www.zhangxinxu.com/wordpress/?p=11455 本文可全文转载，独立域名个人网站无需授权，但需要保留原作者、出处以及文中链接，任何网站均可摘要聚合，商用请联系授权。 无论是rgb()颜色函数，还是hsl()颜色函数，现在还支持一种使用from关键字的相对语法，可以基于现有的色值设置相似色或互补色。 特别适合用在hover等交互效果的实现上。 一、相对语法本质是解构 先来学习下语法，这语法看起来花里胡哨，其实很简单，一学就会。 例如，设置一个文字颜色为红色： p {...
英文单词朗读基于音素预估时长的JS算法
16 days ago
by zhangxinxu from https://www.zhangxinxu.com/wordpress/?p=11473 本文可全文转载，独立域名个人网站无需授权，但需要保留原作者、出处以及文中链接，任何网站均可摘要聚合，商用请联系授权。 本文属于工作技术实践经验分享。 一、先说下需求背景 目前TTS语音合成技术非常成熟，再配合一些静态图片，就能轻松合成一个MP4视频。 但有个问题，字幕。 为了节约成本，一个TTS语音包含的文字往往会有上百字，不可能全部一股脑作为字幕显示，需要进行分词，有一种简单的分词方法就是在逗号等标点位置进行分割。 如下图所示： 然后播放到对应时间，显示对应的字幕，就像下面这样：...
哇哦，font-palette支持动画和palette-mix()混合函数了
17 days ago
by zhangxinxu from https://www.zhangxinxu.com/wordpress/?p=11447 本文可全文转载，独立域名个人网站无需授权，但需要保留原作者、出处以及文中链接，任何网站均可摘要聚合，商用请联系授权。 一、温故而知新 在学习本文内容之前，大家有必要先了解彩色字体与font-palette属性，见此文：“超酷！CSS font-palette与彩色字体显示” 不然，本文的这些内容学习起来会比较吃力。 什么内容呢？ 介绍font-palette属性两个全新的特性，支持animation和palette-mix()函数。 其兼容性如下：...
CSS好用的color-mix颜色函数也可以使用啦
23 days ago
by zhangxinxu from https://www.zhangxinxu.com/wordpress/?p=11449 本文可全文转载，独立域名个人网站无需授权，但需要保留原作者、出处以及文中链接，任何网站均可摘要聚合，商用请联系授权。 一、突然发现，浏览器全支持啦 color-mix()颜色函数去年年初其实我就介绍过了，不过只是简单提了一嘴，见“是时候介绍这几个全新的CSS颜色函数了”一文。 然后，最近发现，这个颜色函数所有现代浏览器都已经支持啦，看看看，绿油油一片大好。 是时候好好介绍这个我认为还挺实用的颜色函数。 二、白加黑的颜色是？ 先通过一个简单的案例预热下对color-mix()颜色函数的认知。 canvas...
CSS Grid布局中的subgrid的适用场景
27 days ago
by zhangxinxu from https://www.zhangxinxu.com/wordpress/?p=11437 本文可全文转载，独立域名个人网站无需授权，但需要保留原作者、出处以及文中链接，任何网站均可摘要聚合，商用请联系授权。 一、subgrid若干常识性知识 subgrid表示子网格，这个东西不是和Grid布局一起出来的，要滞后数年（CSS Grid Level2的内容），其兼容性么……对外的项目还要等个一两年，如果是内部的中台项目，则可以尝鲜了。 subgrid并不是一个CSS属性，而是 grid-template-columns和grid-template-rows属性支持的关键字，其使用的场景需要外面已经有个Grid布局，否则……嗯，虽然语法上不会识别为异常，但是渲染结果上却是没有区别的。 例如：...
JS文本选区变化selectionchange事件实践小记
about 1 month ago
by zhangxinxu from https://www.zhangxinxu.com/wordpress/?p=11430 本文可全文转载，独立域名个人网站无需授权，但需要保留原作者、出处以及文中链接，任何网站均可摘要聚合，商用请联系授权。 2年前有个中台文档产品有个划词评论的功能，那时候还写了篇文章介绍了相关的技术实现，参见：“划词评论与Range开发若干经验分享” 一直运行的好好的。 突然，就在最近，老板提了一嘴，这手机上怎么没法划词评论。 好了，需求就来了。 当时手机上内置的复制、翻译等tips等与划词评论小按钮会有冲突，以及开发成本等原因（台式机模拟touch长按有些麻烦），就没做。 简单研究了下，事件是通用的，就是selectionchange事件。 一、关于selectionchange事件...
这啥?CSS calc-size和interpolate-size,真学不动了
about 1 month ago
by zhangxinxu from https://www.zhangxinxu.com/wordpress/?p=11424 本文可全文转载，独立域名个人网站无需授权，但需要保留原作者、出处以及文中链接，任何网站均可摘要聚合，商用请联系授权。 就算每周学习一个前端新特性，我发现我都来不及学习。 都没有时间钓鱼了，苦啊。 这不，又出了个啥calc-size()函数和interpolate-size属性。 没关系，我还学得动，快扶我起来。 一、非固定尺寸也能动画 calc-size()函数和interpolate-size属性的设计初衷是一致的，就是可以让width、height等尺寸相关的属性即使值是auto，也能有transition过渡动画效果。 最具代表性的就是height:auto的过渡动画实现。...
趁热打铁，SVG feColorMatrix滤镜gogogo!
about 1 month ago
by zhangxinxu from https://www.zhangxinxu.com/wordpress/?p=11418 本文可全文转载，独立域名个人网站无需授权，但需要保留原作者、出处以及文中链接，任何网站均可摘要聚合，商用请联系授权。 一、趁热打铁gogogo 上一篇我们介绍了Pixi.js中的颜色矩阵变换滤镜，接下来，我们趁热打铁，来一起学习下SVG中的colorMatrix滤镜，使用的是<feColorMatrix>这个元素。 先从语法说起。 支持in, type 和 values（注意有s）这三个属性，其中，in属性的实际用法都是固定的，值都是SourceGraphic，表示应用滤镜的原始资源。...
Pixi.js中ColorMatrixFilter自带滤镜效果一览
about 2 months ago
by zhangxinxu from https://www.zhangxinxu.com/wordpress/?p=11393 本文可全文转载，独立域名个人网站无需授权，但需要保留原作者、出处以及文中链接，任何网站均可摘要聚合，商用请联系授权。 一、背景 短视频投放为了有更好的流量推荐，就需要避免重复，以免被系统判定为非原创。 这就需要对视频进行去重。 常见的手段就是翻转，剪裁，叠加素材等。 最近就遇到类似需求，思来想去，其实可以借助算法滤镜对视频的每一帧进行重新处理，这个要比使用其他视频画面1%透明度叠加效率高得多。 所以，就去研究了下Pixi.js中ColorMatrixFilter自带的算法滤镜，称为ColorMatrixFilter，就是通过矩阵变换改变画面色彩的滤镜，这个与模糊、马赛克这类滤镜还是有所不同的。 我看了下官方文档，有20多个自带的方法，品类倒是挺多，但是却没有对应的效果展示，纯文本，且描述也很简单。...
Object.is/===、数组at/直接索引、substring/slice的区别
about 2 months ago
by zhangxinxu from https://www.zhangxinxu.com/wordpress/?p=11387 本文可全文转载，独立域名个人网站无需授权，但需要保留原作者、出处以及文中链接，任何网站均可摘要聚合，商用请联系授权。 一、Object.is和===的区别 Object.is()静态方法可以比较两个对象是否严格相等，在绝大多数情况下，和三等于号===的作用是一样的。 除了下面两种情况： 1. NaN的比较 如果使用等于好比较，则NaN和NaN的返回结果是false： NaN...
Nice! Safari也支持CSS @perporty规则了
2 months ago
by zhangxinxu from https://www.zhangxinxu.com/wordpress/?p=11377 本文可全文转载，独立域名个人网站无需授权，但需要保留原作者、出处以及文中链接，任何网站均可摘要聚合，商用请联系授权。 一、姗姗来迟的支持 先看兼容性图表📈： 可以看到，@property规则Chrome在2020年的时候就支持了，而Safari浏览器姗姗来迟，2023年才支持，目前已经进入可以再生产环境使用的阶段（对兼容性要求不是那么严苛的项目）。 @property规则属于CSS Houdini中的一个特性，可以自定义CSS属性的类型，这个特性在现代CSS开发中还是很有用的，最具代表性的例子就是可以让CSS变量支持动画或过渡效果。 二、“变量种子计数器”的升级 在19年的时候，我曾提过使用“变量种子计数器”来颠覆现有的CSS动画实现方式。...
时隔两年，Chrome也支持round等CSS数学函数了
3 months ago
by zhangxinxu from https://www.zhangxinxu.com/wordpress/?p=11363 鑫空间-鑫生活 本文欢迎分享与聚合，全文转载就不必了，尊重版权，圈子就这么大，若急用可以联系授权。 一、CSS又更强了一点 好消息，时隔两年，原本仅Safari浏览器支持的mod()/rem()/round()现在Chrome浏览器也支持啦。 mod()函数 CSS mod()函数返回第一个参数除以第二个参数的取模结果，类似于JavaScript余数运算符（%）。 使用示意：...