使用“变量种子计数器”扩展CSS动画更多可能性

2019年05月17日 by 张 鑫旭 阅读 2394 次, 今日 56 次

渐变与动画

有些CSS属性,例如background-image渐变不能使用CSS animation动画,那有没有什么办法可以让渐变支持设置动画呢?本文就将介绍我最近研究的一个小成果,可以实现background-image渐变的动画效果。

阅读全文…

如何让MP4 video视频背景色变成透明?

2019年05月16日 by 张 鑫旭 阅读 3117 次, 今日 30 次

mp4视频背景透明

有一些非常幸福的复杂动向,或者一些场景特效使用视频来实现是非常简单的,但是视频有一个严重的问题,那就是背景它不是透明的,无法跟底部图像很好的融合在一起,那有没有什么解决方法可以让它的背景变透明呢?

阅读全文…

CSS实现文字下面波浪线动画效果

2019年04月21日 by 张 鑫旭 阅读 7084 次, 今日 19 次

波浪线头图占位图

很多人对本站部分链接hover时候出现的波浪线动画很感兴趣,本文就专门介绍相关的技术实现,共介绍两种web前端实现方法,希望可以对感兴趣的人带来帮助。

阅读全文…

CSS滤镜和混合模式处理的图片如何上传下载?

2019年04月20日 by 张 鑫旭 阅读 2725 次, 今日 8 次

CSS处理图形合成真图像

使用CSS滤镜和混合模式可以实现很多很酷的图像处理效果,但是处理后的美图用户无法下载,也无法上传,因为此时的图片资源还是原图,有没有什么方法可以得到CSS技术处理后的图像呢?

阅读全文…

CSS实现平行四边形布局效果

2019年04月20日 by 张 鑫旭 阅读 3421 次, 今日 9 次

平行四边形布局缩略图

本文主要介绍平行四边形布局的实现效果,使用了一种可能你没用过,但实际项目中可以实践的新的CSS布局方式。

阅读全文…

CSS scroll-snap滚动事件停止及元素位置检测

2019年04月20日 by 张 鑫旭 阅读 3475 次, 今日 7 次

scroll snap头图

CSS Scroll Snap是个非常好用的特性,可以让滚动停止的时候,无需任何JS代码,自动平滑定位到指定元素的指定位置。但实际开发的时候,发现很多场景还需要知道滚动什么时候停止,以及到底滚动到哪个元素上,浏览器目前还没有原生的方法支持,需要我们使用JS进行辅助处理……

阅读全文…

如何disabled禁用所有表单input输入框元素

2019年04月5日 by 张 鑫旭 阅读 4880 次, 今日 8 次

禁用表单元素

经常会遇到需求,需要禁用div中或者form元素中一堆表单控件元素,那有没有什么简单方法轻松禁用所有表单元素呢,而且是真正意义上的禁用呢?

阅读全文…

CSS :focus-visible伪类让我感动哭了

2019年03月24日 by 张 鑫旭 阅读 6400 次, 今日 5 次

focus-visible缩略图

:focus-visible可以让我们知道元素的聚焦行为到底是鼠标触发还是键盘触发,从而可以更有效地控制浏览器中因为focus行为触发的outline轮廓样式,解决了我一个困扰我多年的难题。

阅读全文…

伪类匹配列表数目实现微信群头像CSS布局的技巧

2019年03月11日 by 张 鑫旭 阅读 6173 次, 今日 2 次

子元素数量不同布局效果也不一样,这样的需求还比较常见,其中借助CSS伪类,我们可以纯CSS判断子元素项的个数,从而智能实现我们需要的布局,无需额外的标签指定,很有意思。

阅读全文…

DOM小测28期 – DOM节点文档前后位置判断

2019年03月2日 by 张 鑫旭 阅读 4182 次, 今日 5 次

DOM小测头图

本题主要考察如何判断DOM节点文档前后位置,父子关系等。我看了下最后的回答,近9成的回答使用了非常啰嗦的方法,比例之高,实在出乎意料。实际上,本题答案只需寥寥数行,因为有原生的API,contains()可以判断节点是否有包含关系;compareDocumentPosition()可以判定任意位置关系。

阅读全文…