详细了解CSS :focus-within伪类及其交互应用

2018年01月21日 by 张 鑫旭 阅读 42570 次, 今日 10 次

:focus-within伪类原本设计的作用是原生表单元素focus时候,祖先<form>元素可以也有状态变化。

但是在我看来,:focus-within功能之强悍,远远不是仅仅和祖先<form>元素玩过家家这么简单。

理论上,只要页面上任意一个元素focus,通过:focus-within就能对页面上任意的元素进行样式控制…

阅读全文…

借助HTML5 details,summary无JS实现各种交互效果

2018年01月15日 by 张 鑫旭 阅读 61226 次, 今日 10 次

HTML5 details, summary这两个标签元素内置交互行为,我们可以充分利用这种交互特性不借助任何JavaScript代码实现各种交互效果。当然,前提需要解决自定义以及outline等体验问题。本文就将带你深入探索这两个非常实用的标签元素。

阅读全文…

瞎折腾:把JS,CSS任意文本文件加密成一张图片

2017年12月24日 by 张 鑫旭 阅读 51841 次, 今日 4 次

周末在家就是应该放松的,我的放松手段很简单,就是学习前端知识,写写文章,抽个时间去钓鱼,完美。

本文内容就是一个临时起意的折腾,一个对JS,CSS等文本文件加密为图片的想法。介绍了web信息转图片以及本地文件如何转图片,以及如何解密等。

希望本文的内容对您的学习有所帮助。

阅读全文…

小tips: 0学习成本实现HTML元素粘滞融合效果

2017年12月21日 by 张 鑫旭 阅读 39510 次, 今日 4 次

元素粘滞融合效果很酷,看上去很难实现,实际上实现却非常容易,几乎0学习成本,一起来看看究竟吧!

阅读全文…

小tip: 了解LinearRGB和sRGB以及使用JS相互转换

2017年12月18日 by 张 鑫旭 阅读 39015 次, 今日 9 次

LinearRGB顾名思义就是线性RGB颜色。

假设白板的光线反射率是100%,黑板的光线反射率是0%。则在线性RGB的世界中,50%灰色就是光线反射率为50%的灰色。

然而,人这种动物,对于真实世界的颜色感受,并不是线性的,而是曲线的……

阅读全文…

深入理解SVG feDisplacementMap滤镜及实际应用

2017年12月14日 by 张 鑫旭 阅读 36683 次, 今日 5 次

借助SVG feDisplacementMap滤镜可以实现非常有意思的水波效果。本文深入介绍feDisplacementMap滤镜的作用原理,同时展示其在实际项目中可以大规模实际应用的潜力。

阅读全文…

canvas实现iPhoneX炫彩壁纸屏保外加pixi.js流体动效

2017年12月14日 by 张 鑫旭 阅读 66613 次, 今日 5 次

iPhone X手机默认的壁纸是一个非常绚丽多彩的效果,实际上我们使用代码也能实现类似的效果,并且颜色可以定制,甚至我们可以加一些动效,比如说它的颜色像水一样的不断的流动流淌,像云雾一样翻腾。

本文将通过实际案例的方式展示这种效果,同时介绍如何在项目中使用这个效果,以及它实现的原理。希望本文的内容能够对您的学习有所帮助。

阅读全文…

用3D LUT滤镜我做了个在线专业电影级别照片调色工具

2017年12月11日 by 张 鑫旭 阅读 32837 次, 今日 6 次

花了周日一整天时间做了个专业电影级别照片调色工具,使用的是3D LUT滤镜。欢迎围观。

阅读全文…

canvas实现任意字符图形的打点或连线动画

2017年12月9日 by 张 鑫旭 阅读 47294 次, 今日 5 次

本文介绍如何借助canvas的getImageData方法实现动态文本字符以及图形图像相关的动效。

多种特效,多种实现方法展示。有JS注释详细为压缩demo,有GIF截屏演示,必要的源代码展示。希望本文的内容能够对您的学习有所帮助。

阅读全文…

照片位图转SVG矢量图片JS工具primitive.js等简介

2017年11月30日 by 张 鑫旭 阅读 36756 次, 今日 6 次

primitive是相对来说比较有名的将照片图片使用几何图形重建的工具。基于原始的这个primitive项目算法,很多开发人员拓展了Java版本,react版本等。自然也有JavaScript版本,就是本文要介绍的primitive.js。以及还会介绍其他一些位图转矢量图JS。

阅读全文…