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

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

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

1900 转嘟 @year_progress@techhub.social:

▓▓▓▓▓▓▓░░░░░░░░ 49%

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

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

给博客主题切换加个动画
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 为切换动画的名称。

/*** …