圆形头像和方形头像 本站的评论列表头像展示样式,从圆形到方形反复了几次。最终还是改成方形了。 圆形头像和方形头像适用场景很容易区分: 圆形头像 聚焦主要面部特征,吸引注意力,有动感有活力。 适用于生人网络、泛娱乐,如 QQ、抖音、B站、微博。 方形头像 展现更多环境信息,沉稳大气。 适用于熟人网络、严肃社交,如微信、支付宝。 作为独立博客,本应算是生人网络,但还是决定用方形头像。因为博友的回访,对评论内容的认真,都是互联网最初美好的样子。 2022-02-28
position: sticky 刷到蜻蜓的墓园的博客,时光页面的年月用了元素固定。 我注意到滑动时固定和释放很顺滑,没有拖帧,而这是我的时光页面一直没解决的问题。 当时是参考jquery.pin改写的 js,没错,是jQuery 时代的方法了,原理就是根据可视范围,切换 position 为 fixed、absolute。慢速滑动时效果是完美的,但是快速滑动时就会有拖帧。 我研究了蜻蜓的墓园源码,发现是用 css 新特性 “position: sticky”。改完之后果然顺滑了。实际效果见时光页面 改的过程中遇到个坑,“position: sticky” 的所有祖先元素不能有 “overflow: hidden” 类似属性,否则不生效。 2022-02-05