关于《CSS选择器世界》这本书

2019年10月16日 by 张 鑫旭 阅读 39592 次, 今日 99 次

《CSS选择器世界》是我正式出版的第二本技术书籍,关于这本书,我有一些话想要和大家说……

阅读全文…

颠覆,原来background-image也是支持CSS动画的

2020年08月6日 by 张 鑫旭 阅读 2061 次, 今日 199 次

背景图片动画

在我以前的认知里,background-image是不能有动画或过渡效果的,但是,今天发现并不是这样的,CSS animation动画和transition过渡都可以触发A背景图到B背景图淡入淡出效果。

阅读全文…

JS纯前端实现audio音频剪裁剪切复制播放与上传

2020年07月27日 by 张 鑫旭 阅读 2702 次, 今日 58 次

音频在线剪辑与处理

本文演示了如何纯前端对MP3、WAV、OGG等格式音频进行剪辑、剪裁、剪切、复制、播放以及上传等处理,使用Web Audio API,有完整的代码,还有在线demo演示页面,即插即用,希望本文内容可以对你的工作有所帮助。

阅读全文…

深入理解CSS background-blend-mode的作用机制

2020年07月22日 by 张 鑫旭 阅读 2076 次, 今日 45 次

七月的背景混合模式

CSS mix-blend-mode属性比较好理解,效果都符合预期,然而background-blend-mode属性的混合效果常出乎意料,那是因为背景混合模式的作用机制有一点特殊,本文就带大家深入理解background-blend-mode的作用机制。

阅读全文…

巧用CSS cross-fade()实现背景图像半透明效果

2020年07月6日 by 张 鑫旭 阅读 4549 次, 今日 62 次

cross-fade背景图透明度降低

虽然CSS新特性非常多,但所有这些新特性,没有任何特性可以实现元素的背景图像半透明,但是元素中的文字内容依然不透明的效果,除了一个例外,那就是cross-fade()图像函数。

阅读全文…

CSS变量对JS交互组件开发带来的提升与变革

2020年07月1日 by 张 鑫旭 阅读 8159 次, 今日 225 次

CSS变量与组件开发

CSS变量带来的提升绝不仅仅是节约点CSS成本,其可以颠覆目前JS组件交互开发的思路,把原来的JS负责的UI层的东西全部转移到了CSS层,组件代码更简洁,视觉表现实现更灵活,本文会举若干例子展示这种提升与变革。

阅读全文…

使用CSS text-emphasis对文字进行强调装饰

2020年06月16日 by 张 鑫旭 阅读 4705 次, 今日 170 次

过去想要强调文字,做法是加粗,或者使用高亮颜色,现在可以使用text-emphasis属性进行强调装饰,我们可以指定任意的装饰字符,很实用的一个CSS新属性。

阅读全文…

移动端双指缩放图片JS事件的实践心得

2020年06月12日 by 张 鑫旭 阅读 6647 次, 今日 64 次

双指缩放示意图

今天要JS实现一个手机中双指缩放的需求,本以为很简单,结果遇到了意料之外的状况,特意记录下来和大家分享,有demo演示,也有精简的JavaScript代码,以后说不定用得到,可以mark下。

阅读全文…

CSS gap属性进化史

2020年06月7日 by 张 鑫旭 阅读 3396 次, 今日 29 次

蜜瓜占位

带大家了解下gap属性的前世今生,了解gap属性在CSS世界3大布局中的过往和现状。

阅读全文…

SVG任意图形path曲线路径的面积计算

2020年06月3日 by 张 鑫旭 阅读 4280 次, 今日 42 次

路径面积计算多边形占位图

我写了一段JS,用来计算SVG任意图形元素,或者path字符串路径对应的面积大小,直接复制粘贴就可以用,希望可以解决你的开发需求。

阅读全文…

CSS columns轻松实现两端对齐布局效果

2020年05月27日 by 张 鑫旭 阅读 7042 次, 今日 53 次

CSS columns,就是分栏布局的columns属性,可以在不改变元素display值前提下实现两端对齐布局效果,说不定关键时候还是很有用的,可以来了解下这种CSS布局方法。

阅读全文…