杜郎俊赏 - dujun.io

波浪下划线

本站对文字的重点标记,经过了几次改版。 一、着重号 最初使用着重号。它的问题是会造成段落间距变大,同时大圆点标记过于醒目,抢夺阅读视线。 text-emphasis: filled circle; text-emphasis-position: under; 效果如:对照文字、着重号标记的文字 二、虚线下划线 着重号用了没多久,就改成虚线下划线了。 border-bottom: 2px dotted; 效果如:对照文字、虚线下划线标记的文字 三、波浪下划线 虚线下划线没什么问题,但是今天突然觉得平庸了,决定改成波浪线。 代码参考了 CSS实现文字下面波浪线动画效果。具体实现如下: padding: 8px 0; background: radial-gradient(circle at 10px -7px, transparent 8px, currentColor 8px...
2022-08-02

989封面
mac系统浏览器,隐藏文本光标(除输入框外)。css 如下: * { caret-color: transparent; } input:focus-within, textarea:focus-within { caret-color: auto; } 应用前效果(录自友站 Vian): 应用后效果:
2022-06-28

圆形头像和方形头像

本站的评论列表头像展示样式,从圆形到方形反复了几次。最终还是改成方形了。 圆形头像和方形头像适用场景很容易区分: 圆形头像 聚焦主要面部特征,吸引注意力,有动感有活力。 适用于生人网络、泛娱乐,如 QQ、抖音、B站、微博。 方形头像 展现更多环境信息,沉稳大气。 适用于熟人网络、严肃社交,如微信、支付宝。 作为独立博客,本应算是生人网络,但还是决定用方形头像。因为博友的回访,对评论内容的认真,都是互联网最初美好的样子。
2022-02-28

position: sticky

position-sticky封面
刷到蜻蜓的墓园的博客,时光页面的年月用了元素固定。 我注意到滑动时固定和释放很顺滑,没有拖帧,而这是我的时光页面一直没解决的问题。 当时是参考jquery.pin改写的 js,没错,是jQuery 时代的方法了,原理就是根据可视范围,切换 position 为 fixed、absolute。慢速滑动时效果是完美的,但是快速滑动时就会有拖帧。 我研究了蜻蜓的墓园源码,发现是用 css 新特性 “position: sticky”。改完之后果然顺滑了。实际效果见时光页面 改的过程中遇到个坑,“position: sticky” 的所有祖先元素不能有 “overflow: hidden” 类似属性,否则不生效。
2022-02-05

手机端图片缩放优化完成。
2022-01-25

手机端视频增加了时间拖动功能。
2022-01-23

增加了手机端禁止页面缩放。 但是在"screen first"的iOS下,页面滚动时无法阻止事件,仍然可以缩放。
2022-01-22

dark-mode封面
深色模式完成。 优先跟随系统,系统未设置的,在日出之前或日落之后切换为深色模式。 左:浅色 右:深色
2022-01-11

重构完成。全站改成js渲染。
2021-12-21

评论页加了无刷。顶部进度条用了 nprogress。
2017-06-07