水一篇代码相关的 blog. 最近在做微信小程序, 设计稿上有一个省略号依次颜色变化组成的 loading 组件. 据说来自微信 UI 设计标准, 可是哪里都找不到, 只能自制了. 顺便吐槽一下小程序的设计和文档, 真是 tmd... 思路 效果主要就是省略号中各个点周期性交替闪烁. 闪烁可以有多种表现形式, 如颜色或者透明度变化, 这方面倒不是什么大问题. 如何支持任意个数的"点"是需要思考的地方. 经过一些实验, 打算采取通过子元素作为 stub…
注: 本页的 demo 需要较新的浏览器(推荐 Chrome70+)才能正常执行 大概<妇联 4>上映的时候, google 也上线了一个无限手套的特效(点此链接再点屏幕右侧的手套). 搜索结果中的条目, 随机的一半机会随风消逝, 同时附加一些屏幕滚动以及搜索总数目的变化. 除了敬佩还是敬佩! 从那时就有了复刻一下这个效果的想法. 简单考察了一下, 控制台打出了的 log…
这是一道我经常在面试中会问的css题：如何实现Android平台上常见的，线条长度会变化的Loading组件： 这是一个我自己也答不出来的题, 问这个题的目的只是试探一下候选人是不是思维特别敏捷或者真的有深厚的css知识，而且也只当附加题助兴。如果真的思路正确甚至能完美答出，那真是遇见水平超出自己的人了。可惜并没有遇到，哪怕是思路靠边的也没有，看来此题并不是一个特别好的面试题。 第一次发现这个的纯css实现， 是在使用公司的。具体Inspect的细节已经不急不清楚了，只记得是根据边框dash…
4 月 1 号打开了 StackOverflow, 看见满屏幕中二元素还以为自己走错了板块. 后来才想到愚人节的事情. 除了独角兽和超 gay 配色, 还有个鼠标下雪的效果还行, 就想着做做看. 思路 目标区域监听事件, 获取鼠标位置. 图形: canvas 还是 DOM? 仔细看原实现, 雪花其实就是*号. 这样 DOM 会方便一些, 但 canvas 也不是不行. 动画: 动画部分由, 和 x, y…
在测试前端解析一个比较大的 Excel 文件时候, 发现我们的 button 的 spinner 卡住了. 印象中即使线程阻塞了, 有些 GPU 加速的东西依然应该有效. 怀疑又是某种 css in js 的弱智用法(没错, 我就是讨厌 css in js). 查看了一下元素发现是用了 svg 的animateTransform. 写法上面感觉跟 css 差不多都是一堆 + . 难道这样也会阻塞吗? 所以做了个测试 demo 结果是, 虽然长得像, 但 css animation…