张鑫旭-鑫空间-鑫生活

it's my whole life!

Latest articles

研究了下Houdini中的CSS Layout API

by zhangxinxu from https://www.zhangxinxu.com/wordpress/?p=9572 本文欢迎分享与聚合,全文转载就不必了,尊重版权,圈子就这么大,若急用可以联系授权。 一、基本概念和一些属性API CSS Layout API可以让开发者自定义布局方式,例如实现瀑布流布局效果,全新的表格布局效果等。 CSS Layout API的使用分为两部分。 第1部分是在CSS中设置自定义的布局名称,和Flex布局、Grid布局一样,也是使用display属性,区别在于CSS Layout API自定义的布局使用layout()函数表示。 例如自定义一个瀑布流布局名为'masonry',则在CSS中使用的语法就会是下面这样: .container...

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

by zhangxinxu from https://www.zhangxinxu.com/wordpress/?p=9561 本文欢迎分享与聚合,全文转载就不必了,尊重版权,圈子就这么大,若急用可以联系授权。 一、需求描述 · 有一个抽奖转盘,奖品的描述文字希望沿着转盘显示。 · 元素A到元素B中间有条连线,这条线是倾斜的,希望文字可以沿着这条斜线排列。 · 七夕想要给女朋友准备一份礼物,需要一些图案组成一个爱心形状。 等。 以上这些场景都属于文字不规则排版。 有没有什么办法实现呢? 有! 使用SVG的<textPath>元素可以轻松实现。 二、textPath让文字沿着路径排列 举个简单的例子,随着绘制一个曲线路径,然后整几个文字,SVG代码如下所示:...

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

by zhangxinxu from https://www.zhangxinxu.com/wordpress/?p=9533 本文欢迎分享与聚合,全文转载就不必了,尊重版权,圈子就这么大,若急用可以联系授权。 自定义事件的传参主要是通过CustomEvent.detail进行的。 一、addEventListener事件触发 例如,给输入框元素(假设DOM对象变量名称是input)绑定了一个'input'事件,如下: input.addEventListener('input', function () { // write by zhangxinxu }); 此时,点击下拉框希望触发输入框元素的'input'事件,就可以使用dispatchEvent方法和CustomEvent对象。...

CSS overflow-anchor属性与滚动锚定

by zhangxinxu from https://www.zhangxinxu.com/wordpress/?p=9544 本文欢迎分享与聚合,全文转载就不必了,尊重版权,圈子就这么大,若急用可以联系授权。 一、滚动锚定是什么? 大家可能有过这样的浏览体验,就是图片很多的时候,例如漫画网站,尤其是条漫,在手机端,垂直布局这种,如果上方的图片加载慢,那么下方的图片看着看着就会被推下来,然后自己又要重新去滚动定位。 这是一个不太友好的浏览器体验行为。 于是,Chrome 56(2017年)和Firefox 66(2019年)开始最浏览器原来的这些滚动行为进行了优化,实现了一种“滚动锚定”的交互行为。 具体描述为:当前视区上面的内容突然出现的时候,浏览器自动改变滚动高度,让视区窗口区域内容固定,就像滚动效果被锚定一样。...

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

by zhangxinxu from https://www.zhangxinxu.com/wordpress/?p=9515 本文欢迎分享与聚合,全文转载就不必了,尊重版权,圈子就这么大,若急用可以联系授权。 一、震惊的真相 今天偶然发现,原来CSS background-image属性也是可以有CSS animation动画效果,或者transition过渡效果的,颠覆了我的CSS观。 当时,我是绝对不相信的,以为我的眼睛花了。 背景图A到背景图B怎么可能有动画过渡效果呢?这和我这么多年的认识完全不符合啊!难道这么多年我学的是假的CSS。 但是,事实就摆在眼前,不得不信啊。 我一琢磨,莫非是Chrome浏览器自己加了什么私货,最近才支持的? 于是我打开MDN文档一看,发现了一个特殊的名词——discrete,如下截图所示:...

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

by zhangxinxu from https://www.zhangxinxu.com/wordpress/?p=9505 本文欢迎分享与聚合,全文转载就不必了,尊重版权,圈子就这么大,若急用可以联系授权。 背景是这样的,用户上传音频文件,可能只需要几十秒就够了,但是常规的音乐都要3~5分钟,80%的流量都是不需要的,要是就这么传上去,其实是流量的浪费,如果可以在前端就进行剪裁,也就是只取前面一段时间的音频,岂不是可以给公司省很多流量费用,前端的业务价值就体现了。 关键如何实现呢? 下面,就以“截取用户上传音频前3秒内容”的需求示意下如何借助Web Audio API实现音频的部分复制与播放功能。 一、不哔哔,直接正题 实现步骤如下。 1. File对象转ArrayBuffer...

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

by zhangxinxu from https://www.zhangxinxu.com/wordpress/?p=5474 本文欢迎分享与聚合,全文转载就不必了,尊重版权,圈子就这么大,若急用可以联系授权。 一、可能都知道的 首先,讲两点大家可能都知道的知识点: background-blend-mode本身就带有隔离特性,也就是一个元素应用background-blend-mode背景混合模式,最终的效果只会受当前元素的背景图像和背景颜色影响,不会受视觉上处于当前区域其他任意元素影响。 应用background-blend-mode属性后,不仅各个图像之间要进行混合,同时还要和背景色进行混合。 接下来,讲下大家可能并不知道的知识点,这也是很多人搞不清楚为什么background-blend-mode属性这么渲染的原因。...

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

by zhangxinxu from https://www.zhangxinxu.com/wordpress/?p=9489 本文欢迎分享与聚合,全文转载就不必了,尊重版权,圈子就这么大,若急用可以联系授权。 一、需求描述 某元素,希望background-image背景图片是半透明的,但是,元素里面的其他内容,例如文字,图标之类的还是不透明。 如果是纯色背景或者是CSS渐变背景,很好处理,使用rgba或者hsla颜色色值即可。 但是,如果是url()背景图像,似乎就无能为力了。 如果是个内联的<img>图像那很好处理,无论是filter滤镜、mask遮罩还是opacity透明度设置都可以实现我们的效果,但是偏偏这里是背景图像,所有前面提到的这些方法都会影响文字的正常显示。...

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

by zhangxinxu from https://www.zhangxinxu.com/wordpress/?p=9477 本文欢迎分享与聚合,全文转载就不必了,尊重版权,圈子就这么大,若急用可以联系授权。 一、CSS变量带来的质变 CSS变量带来的提升绝不仅仅是节约点CSS代码,以及降低CSS开发和维护成本。 更重要的是,把组件中众多的交互开发从原来的JS转移到了CSS代码中,让组件代码更简洁,同时让视觉表现实现更加灵活了。 我们通过几个案例来说明这一变化。 二、简化了JS对DOM设置的介入 案例1:loading进度效果 例如实现下图所示的变量效果: 外面有一层背景层,然后里面有进度条,还有进度值。 在过去,会使用两层div元素,然后JS去改变里面有颜色条条的宽度,同时设置进度值。...

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

by zhangxinxu from https://www.zhangxinxu.com/wordpress/?p=9469 本文欢迎分享与聚合,全文转载就不必了,尊重版权,圈子就这么大,若急用可以联系授权。 一、引言 在过去,想要对某部分文字进行强调,通常的做法是加粗,或者使用一个高亮的颜色,现在有了新的选择,就是使用text-emphasis属性进行强调装饰。 text-emphasis家族总共有4个CSS属性,分别是: text-emphasis text-emphasis-color text-emphasis-style text-emphasis-position 其中,text-emphasis是text-emphasis-color和text-emphasis-style这两个CSS属性的缩写,注意,并不包含text-emphasis-position属性,text-emphasis-position属性是独立的。...

Discover, share and read the best on the web

Subscribe to RSS Feeds, Blogs, Podcasts, Twitter searches, Facebook pages, even Email Newsletters! Get unfiltered news feeds or filter them to your liking.

Get Inoreader
Inoreader - Subscribe to RSS Feeds, Blogs, Podcasts, Twitter searches, Facebook pages, even Email Newsletters!