只是玩玩

随手记下,日子就有了回声。

这里是一些没有来得及展开的片段:今天的天气、脑子里突然冒出的想法、路上看见的一棵树,以及那些不适合写成文章的小事。

2025周一

🌇

1900 的动态图片 1
1900 的动态图片 2
1900 的动态图片 3
1900 的动态图片 4
2025周日

@eallion 昨天看了别人在恩施徒步的纪录片,就和这个一样,落差将近1000米的大崖壁,在山上俯瞰,风景太绝了。

2025周日

近期博友们在群里分享了柳州的照片。
想起自己以前在柳州生活的岁月,有朋友,有目标,有交际,虽然那个时候是家里最艰难的日子,但是却是我人生中最快乐的几年了。

1900 的动态图片 1
1900 的动态图片 2
1900 的动态图片 3
1900 的动态图片 4
2025周日

@eallion 这是你小时候的上学路线吗。

2025周日

@eallion 哈哈,我那个有点离谱,代码块展开的按钮跑到文章最底下了。

2025周日

囧,昨天改主题改了个bug出来,才发现。

2025周六

妈也,这天气穿短裤简直是蚊子的移动餐厅。

2025周六

@sun 我也是抄的,有AI改起来还是挺方便的。

2025周六

给博客主题切换加个动画
https://1900.live/gei-bo-ke-zhu-ti-qie-huan-jia-ge-dong-hua

from 1900’Blog.(自动同步,如果提示404,请稍后再试)

#博客

这个功能其实想搞很久了,之前在某个主题上看到过一个圆形扩散的过渡动画。

当时自己尝试着结合AI实现了一下,虽然大致效果实现了,但是整个流畅度很差,而且存在很多BUG。

前些日子看到大佬发布的 Retypeset 主题上有一个自上而下的过渡动画。流畅度,美观度都非常不错,而且这个主题也是基于Astro实现的,我要抄的话也简单一些 😄。

整个效果实现依旧是基于 Chrome 的 View-Transition 这个特性实现的。如果你的博客有主题切换功能,且是MPA网页,就能通过添加一些简单的脚本和CSS实现这个效果。(SPA能不能用我没测试,根据文档是可以的,但是效果应该不好?)

我粗略理解的整个实现原理大概为:

在切换主题的时候页面会有一个 new 版本和一个 old 版本。
页面最初时 old 会版本覆盖在 new 版本之上,在执行完主题设置操作后,让 old 版本的高度逐渐缩小,缩小后自然就会把下方的 new 显示出来。
这个过程就是我们看到的流畅切换动画。

首先添加一个页面切换的动画CSS,animation-theme-toggle 为切换动画的名称。

/*** …