flex:0 flex:1 flex:none flex:auto应该在什么场景下使用?

2020年10月6日 by 张 鑫旭 阅读 3296 次, 今日 3 次

flex:initial适合小部件元素的分布布局,flex:0适合用到替换元素的场景,flex:none适合按钮等不换行的小控件,flex:1适合等分布局,flex:auto适合基于内容动态适配的布局,具体的剖析可以点击链接进行查看。

阅读全文…

研究了下Houdini中的CSS Layout API

2020年09月13日 by 张 鑫旭 阅读 4113 次, 今日 2 次

CSS layout自定义布局

目前关于CSS Layout API最详细最深入的文章,内有简单易学全新的自定义布局案例,案例代码有详细的注释描述,彻底弄懂CSS Layout API。

阅读全文…

文字沿着不规则路径排版布局的实现

2020年09月6日 by 张 鑫旭 阅读 5287 次, 今日 4 次

封面占位图

SVG textPath可以让文字沿着指定的路径排列排版布局,文中还有配套开发的路径转换工具和诸多应用案例,精彩不容错过。

阅读全文…

JS CustomEvent自定义事件传参小技巧

2020年08月20日 by 张 鑫旭 阅读 5538 次, 今日 3 次

CustomEvent自定义事件传参

本文介绍如何使用CustomEvent.detail触发addEventListener绑定的内置或自定义的事件并传参,以及IE浏览器不支持的解决方法。

阅读全文…

CSS overflow-anchor属性与滚动锚定

2020年08月12日 by 张 鑫旭 阅读 7254 次

小鱼儿占位图

带大家了解下滚动锚定概念以及对应overflow-anchor属性的作用和特性,虽然不是常用CSS,但是,关键时候说不定就救命了。

阅读全文…

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

2020年08月6日 by 张 鑫旭 阅读 7705 次, 今日 2 次

背景图片动画

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

阅读全文…

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

2020年07月27日 by 张 鑫旭 阅读 7417 次, 今日 2 次

音频在线剪辑与处理

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

阅读全文…

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

2020年07月22日 by 张 鑫旭 阅读 5131 次, 今日 1 次

七月的背景混合模式

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

阅读全文…

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

2020年07月6日 by 张 鑫旭 阅读 9074 次, 今日 3 次

cross-fade背景图透明度降低

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

阅读全文…

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

2020年07月1日 by 张 鑫旭 阅读 14622 次, 今日 4 次

CSS变量与组件开发

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

阅读全文…