鼠标气泡

宝宝日记的页面中规中矩，一直想加点活泼的元素，苦于没有找到理想的参考样式。 前天，在博友Design小院那里看到了鼠标气泡的效果，感觉很喜欢。寻迹找到了控件原作者的网站90's Cursor Effects。动效如下： 在源代码基础上主要做了两处修改： 增加气泡随机透明度，更显真实； 原配色在暗黑模式下过于显眼，改为牡丹粉红 #eea2a4。 完成的动效如下： 已实装于宝宝日记时间轴、宝宝日记详情页。

2022-08-24

波浪下划线

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

2022-08-02

mac系统浏览器，隐藏文本光标（除输入框外）。css 如下： * { caret-color: transparent; } input:focus-within, textarea:focus-within { caret-color: auto; } 应用前效果（录自友站 Vian）： 应用后效果：

2022-06-28

看到博友 gd1214b 的文章《Web Feed 倡议书》，增加了 RSS 自动发现功能。 在 里增加： 效果如下：

2022-05-12

仿微信语音播放 svg

决定优化语音播放的动效，网上找了一圈没有满意的，最后自己用微信程序包中的 svg 来改。 svg 如下： 效果如下：

2022-04-08

iPhone 7屏幕更换

主力机是 iPhone 12，平时玩游戏用的是备用机 iPhone 7。这台 7 已经用了好几年，换过两次电池，一次屏幕。几天前屏幕又摔破了，漏液晶，花屏、触摸失灵。 纠结了一下，为了主力机的寿命，还是要有备用机。查了 iPhone 7/8 的二手价格后，果断在 pdd 买了个屏幕总成。 开始拆机。上次把前置摄像头排线弄断了。 干脆把前置摄像头和听筒都去掉了，游戏里用不到。 复活，再用五百年。

2022-03-04

圆形头像和方形头像

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

2022-02-28

avatar 和 favicon

在博友𝑭𝒐𝒏𝒈.的网站注意到一个设计，在文章内容中的链接前加了小图标，受此启发，我完善一下相关样式。目前实现的完整路径是： avatar（带邮箱地址的评论） 抓取 Gravatar 头像（官网被墙，使用国内源 cravatar.cn、sdn.geekzu.org） 如果是 QQ 邮箱，尝试抓取 QQ 头像（博友 cfanlost 建议） 对于有网址的尝试抓取 favicon favicon 抓取根目录的 favicon.ico 文件 解析 html，抓取 apple-touch-icon、shortcut icon 链接前缀图标 博友网址显示 avatar 其他网址显示 favicon 无图标的显示默认图标

2022-02-28

抓取 favicon 作为头像

注意到璟雯与橙没有用 gravatar，给我的头像设置了本站的 favicon。受此启发，我也想到还有很多博友不是 wordpress 系建站的。因此增加了抓取 favicon 作为头像的功能，已上线： 首先尝试抓取根目录的 favicon.ico 文件； 然后尝试解析 html 中 shortcut icon； 使用第三方 api 作为最后的补充方法，我找到的是Favicon Kit这个网站。 https://api.faviconkit.com/domain/size Replace domain with the domain name. Replace size with the size, in pixels. For example, to get the Stackoverflow icon, you’d use this URL: https://api.faviconki...

2022-02-22

过时浏览器兼容

博友璟雯与橙留言提醒，QQ浏览器查看本站是空白（对话详见留言）。 我在虚拟机 win10 上装了 QQ 浏览器检查发现 js 报错，不支持 replaceAll 等新方法。 QQ 浏览器的 Chrome 内核版本是 70： 获取到的 ua 是： Mozilla/5.0 (Windows NT 10.0; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/70.0.3538.25 Safari/537.36 Core/1.70.3883.400 QQBrowser/10.8.4559.400 replaceAll 方法需要 85 以上的 Chrome 内核才支持，详见caniuse： 本来打算将涉及到的新方法都自己实现一下兼容方法，但是后来发现 QQ 浏览器连 arr.shift 都报方法不存在，只能作罢了。 最终方案是根据 ua 判断...

2022-02-22

分页： 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72