2020年09月6日 by 张 鑫旭 阅读 22598 次, 今日 13 次

SVG textPath可以让文字沿着指定的路径排列排版布局,文中还有配套开发的路径转换工具和诸多应用案例,精彩不容错过。
阅读全文…
标签: CSS Shapes, css相关, emoji字体, offset-path, path, SVG, textPath, viewBox
发布在 SVG相关 | 9 条评论 »
2020年08月20日 by 张 鑫旭 阅读 31465 次, 今日 16 次

本文介绍如何使用CustomEvent.detail触发addEventListener绑定的内置或自定义的事件并传参,以及IE浏览器不支持的解决方法。
阅读全文…
标签: addEventListener, bubbles, cancelable, createEvent, CustomEvent, dispatchEvent, Event, javascript, 自定义事件
发布在 JS API | 20 条评论 »
2020年08月12日 by 张 鑫旭 阅读 43157 次, 今日 33 次

带大家了解下滚动锚定概念以及对应overflow-anchor属性的作用和特性,虽然不是常用CSS,但是,关键时候说不定就救命了。
阅读全文…
标签: overflow-anchor, overscroll-behavior, Scroll Snap, scroll-behavior, 锚点
发布在 CSS相关 | 12 条评论 »
2020年08月6日 by 张 鑫旭 阅读 41299 次, 今日 20 次

在我以前的认知里,background-image是不能有动画或过渡效果的,但是,今天发现并不是这样的,CSS animation
动画和transition
过渡都可以触发A背景图到B背景图淡入淡出效果。
阅读全文…
标签: animation, background, background-image, linear-gradient, transition
发布在 CSS相关 | 15 条评论 »
2020年07月27日 by 张 鑫旭 阅读 40180 次, 今日 18 次

本文演示了如何纯前端对MP3、WAV、OGG等格式音频进行剪辑、剪裁、剪切、复制、播放以及上传等处理,使用Web Audio API,有完整的代码,还有在线demo演示页面,即插即用,希望本文内容可以对你的工作有所帮助。
阅读全文…
标签: API, ArrayBuffer, audio, AudioBuffer, AudioBufferSourceNode, AudioContext, copyFromChannel, copyToChannel, createBufferSource, FileReader, Float32Array, readAsArrayBuffer
发布在 JS实例 | 24 条评论 »
2020年07月22日 by 张 鑫旭 阅读 24645 次, 今日 22 次

CSS mix-blend-mode属性比较好理解,效果都符合预期,然而background-blend-mode属性的混合效果常出乎意料,那是因为背景混合模式的作用机制有一点特殊,本文就带大家深入理解background-blend-mode的作用机制。
阅读全文…
标签: background, background-blend-mode, css相关, isolation, mix-blend-mode, multiply, screen, 正片叠底, 滤色
发布在 CSS相关 | 3 条评论 »
2020年07月6日 by 张 鑫旭 阅读 42260 次, 今日 27 次

虽然CSS新特性非常多,但所有这些新特性,没有任何特性可以实现元素的背景图像半透明,但是元素中的文字内容依然不透明的效果,除了一个例外,那就是cross-fade()图像函数。
阅读全文…
标签: background-image, cross-fade, filter, mask, opacity, 半透明, 背景图片
发布在 CSS相关 | 14 条评论 »
2020年07月1日 by 张 鑫旭 阅读 40371 次, 今日 15 次

CSS变量带来的提升绝不仅仅是节约点CSS成本,其可以颠覆目前JS组件交互开发的思路,把原来的JS负责的UI层的东西全部转移到了CSS层,组件代码更简洁,视觉表现实现更灵活,本文会举若干例子展示这种提升与变革。
阅读全文…
标签: calc, css var, CSS变量, UI组件库, 自定义属性, 选项卡
发布在 CSS相关 | 42 条评论 »
2020年06月16日 by 张 鑫旭 阅读 23249 次, 今日 12 次

过去想要强调文字,做法是加粗,或者使用高亮颜色,现在可以使用text-emphasis
属性进行强调装饰,我们可以指定任意的装饰字符,很实用的一个CSS新属性。
阅读全文…
标签: css相关, text-decoration, text-emphasis, text-emphasis-color, text-emphasis-position, text-emphasis-style, writing-mode
发布在 CSS相关 | 6 条评论 »
2020年06月12日 by 张 鑫旭 阅读 44436 次, 今日 16 次

今天要JS实现一个手机中双指缩放的需求,本以为很简单,结果遇到了意料之外的状况,特意记录下来和大家分享,有demo演示,也有精简的JavaScript代码,以后说不定用得到,可以mark下。
阅读全文…
标签: event.touches, javascript, Math.hypot, scale, touch-action, touchmove, 双指缩放, 手机
发布在 JS实例 | 19 条评论 »