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 Feeder

zhangxinxu.com

张鑫旭-鑫空间-鑫生活

Get the latest updates from 张鑫旭-鑫空间-鑫生活 directly as they happen.

Follow now 166 followers

Latest posts

Last updated 4 days ago

今日学习CSS文本自定义高亮API

4 days ago

by zhangxinxu from https://www.zhangxinxu.com/wordpress/?p=11282 本文可全文转载,独立域名个人网站无需授权,但需要保留原作者、出处以及文中链接,任何网站均可摘要聚合,商用请联系授权。 一、前前前言 生命不息,学习不止。 本周实操一下CSS Custom Highlight API。 首先,Firefox浏览器最近也支持了上述API,至此,现代浏览器完成了大统一,可以学起来了。...

了解infinity、pi等CSS calc()计算关键字

8 days ago

by zhangxinxu from https://www.zhangxinxu.com/wordpress/?p=11261 本文可全文转载,独立域名个人网站无需授权,但需要保留原作者、出处以及文中链接,任何网站均可摘要聚合,商用请联系授权。 一、calc()函数支持的新关键字 CSS在不断发展,除了新支持了若干数学函数之外,还支持了一些数学关键字,且这些关键字和JavaScript中的关键字神似。 包括: e log常量,约等于:2.7182818284590452354. pi 圆周率,约等于:3.1415926535897932....

如何使用纯CSS鉴别是不是Safari浏览器

18 days ago

by zhangxinxu from https://www.zhangxinxu.com/wordpress/?p=11252 本文可全文转载,独立域名个人网站无需授权,但需要保留原作者、出处以及文中链接,任何网站均可摘要聚合,商用请联系授权。 一、时代变了某些没变 Safari啊Safari,唉,不知道说什么才好。 最近做项目,又遇到了近Safari才会出现的问题,拖拽元素的时候有奇怪的残影。 包括之前也有很多问题,也都是Safari下才会出现的。 所以,就出现了对Safari专门处理下的需求。 我查了一下,居然没有专门匹配Safari的CSS的资料介绍,那就自己撸一个吧。 二、使用@supports规则进行识别...

CSS transition-behavior让display none也有动画效果

23 days ago

by zhangxinxu from https://www.zhangxinxu.com/wordpress/?p=11245 本文可全文转载,独立域名个人网站无需授权,但需要保留原作者、出处以及文中链接,任何网站均可摘要聚合,商用请联系授权。 一、现状描述 有一个元素设置了display:none隐藏,然后使用JS让其实现的时候,希望同时有透明度变化的动画效果,使用transition属性是无效的。 如下代码示意: <div id="element" class="element">占位内容</div> .element...

告别JS浮层,全新的CSS Anchor Positioning锚点定位API

25 days ago

by zhangxinxu from https://www.zhangxinxu.com/wordpress/?p=11215 本文可全文转载,独立域名个人网站无需授权,但需要保留原作者、出处以及文中链接,任何网站均可摘要聚合,商用请联系授权。 一、新的王牌特性 Chrome 125已经正式支持CSS锚点定位了,至此,我们可以使用纯CSS实现绝对定位元素A相对于任意锚点元素B的定位效果了,过去那些使用JS实现的浮层效果均有了更好的实现方式。 下面赶快一睹为快吧。 二、先从最简单的案例开始 一个按钮,一张图片。 在过去,希望点击按钮让图片在按钮的下边缘对齐显示,要么有DOM结构限制,要么借助JS。...

聊聊Top Layer顶层特性的隐患与实践

about 1 month ago

by zhangxinxu from https://www.zhangxinxu.com/wordpress/?p=11213 本文可全文转载,独立域名个人网站无需授权,但需要保留原作者、出处以及文中链接,任何网站均可摘要聚合,商用请联系授权。 一、好不好用过才知道 HTML5 <dialog>元素使用showModal()显示的时候,自动层级最高,自动居中,自动有黑色蒙层,明显就比使用show()方法或者设置open属性显示弹框要好。 于是,就在前段时间,对于LuLu UI Edge主题的弹框组件,我就进行了大刀阔斧的修改,让弹框的显示均采用showModal()方法(通过劫持open属性实现)。 修改完了自我感觉良好,但是真的实践之后,痛苦的事情来了,由于dialog元素顶层了,因此,自定义的验证提示,浮动定位,toast提示等,全都无法显示,因为这些组件的元素创建都是在body元素下的,由于弹框层级顶级,因此,这些组件样式被覆盖地死死的,用户根本就看不到。...

记一次技术交流, feMerge滤镜实现克隆DOM样式

about 2 months ago

by zhangxinxu from https://www.zhangxinxu.com/wordpress/?p=11200 本文可全文转载,独立域名个人网站无需授权,但需要保留原作者、出处以及文中链接,任何网站均可摘要聚合,商用请联系授权。 一、故事的背景 故事的背景是这样的,前段时间,有位同行咨询了我这么个问题: 大佬,请教一下,css有没有办法在不增加dom元素的情况下,将一个元素的样式 copy多一个出来? 像这样,是两个 如下图所示: 然后这是后续的对话:...

如何用简单的Web方法实现图片的马赛克效果

2 months ago

by zhangxinxu from https://www.zhangxinxu.com/wordpress/?p=11187 鑫空间-鑫生活 本文可全文转载,独立域名个人网站无需授权,但需要保留原作者、出处以及文中链接,任何网站均可摘要聚合,商用请联系授权。 一、开门见山先看实现 在Web上实现图片的马赛克效果最简单的做法就是借助SVG滤镜。 操作很简单,页面任意位置粘贴如下所示的SVG代码: <svg> <filter id="mosaic">...

不使用font-weight等CSS实现文字变瘦或变胖效果

2 months ago

by zhangxinxu from https://www.zhangxinxu.com/wordpress/?p=11182 鑫空间-鑫生活 本文欢迎分享与聚合,全文转载就不必了,尊重版权,圈子就这么大,若急用可以联系授权。 一、没想到吧,还是SVG滤镜 今天继续SVG滤镜的学习,不过直接从实用的案例出手。 先看效果。 您可以狠狠地点击这里:使用feMorphology滤镜改变文字的粗细胖瘦demo 在我的1倍屏显示器下的效果如下所示: 尤其是其中的变细效果,在Web中是比较难实现的。...

node环境中使用fluent-ffmpeg每隔一秒视频截图

3 months ago

by zhangxinxu from https://www.zhangxinxu.com/wordpress/?p=11175 鑫空间-鑫生活 本文欢迎分享与聚合,全文转载就不必了,尊重版权,圈子就这么大,若急用可以联系授权。 一、需求产生的背景 之前有撰文(使用JS快速获取video视频任意位置的缩略图)介绍过纯前端获取视频的截图,按照每秒获取一张的频率去获取,性能还是可以的。 但是,怪事发生了,最近几个版本的Chrome不知道改动了什么东西,使用<video>元素获取视频缩略图的性能变得极差,注意这里的副词,是“极”,区别非常明显。 这可就非常影响用户体验了。 当然,也不是没有解决方法,那就是使用mp4box.js加WebCodecs去解码,但是,这个方法门槛有点高,很多前端小伙伴是玩不转的。 所以就想着,要不缩略图就不实时获取了,直接写个Node.js服务,线下提前跑任务生成好就好了。...

今天学习SVG滤镜feGaussianBlur和feDropShadow

3 months ago

by zhangxinxu from https://www.zhangxinxu.com/wordpress/?p=11166 鑫空间-鑫生活 本文欢迎分享与聚合,全文转载就不必了,尊重版权,圈子就这么大,若急用可以联系授权。 一、写在开头的絮絮叨 今天周日在家,本来想去钓鱼的,临出门,又不想了,唉……连续钓鱼,啥产出都没有,有负罪感,钓鱼都不开心。 算了,既然不愿意,何必勉强自己,虽然今天的天气非常时候钓鱼,阴天,温度稳定,全天鱼口都不算,买的红虫怕是也要浪费了。 所以,开始打开电脑学习,写作吧。 打开文档,快速过了一边,看看还有什么自己不知道的,再评估下学习难度,嗯……目前这个阶段比较适合学习的是feGaussianBlur和feDropShadow这两个滤镜元素,因为都是静态效果,也就是不需要和其他元素发生交集就能有效果。 好,抓紧时间,看看能不能今天把这篇文章给撸出来。...

SVG滤镜系列之搞懂元素

3 months ago

by zhangxinxu from https://www.zhangxinxu.com/wordpress/?p=11158 鑫空间-鑫生活 本文欢迎分享与聚合,全文转载就不必了,尊重版权,圈子就这么大,若急用可以联系授权。 一、前言 SVG滤镜元素我之前有深入介绍过两个,一个是feTurbulence滤镜,另外一个是 feDisplacementMap滤镜,前者可以用来模拟自然效果,后者可以实现元素形变,都是SVG滤镜比较高级的应用。 最近,正好无所事事,就决定查漏补缺,把SVG滤镜元素整个都过一遍,系统了解下,让对这一块的了解更加扎实,说不定以后就用到,提前做技术储备。 先从比较简单的<feBlend>元素开始。 二、feBlend元素的作用和语法...