添加白天夜间模式转换动画
F点击查看更新记录
更新记录
2022-03-11
- 源教程转为pug文件，styl文件
- 精简js内容，去jquery化
- 嵌入主题原生的夜间切换模式按钮
点击查看参考教程
参考方向 | 教程原贴 |
|---|---|
原教程 | butterfly主题实现白天夜晚切换动画 |
写在最前
其实这个动画切换效果不是第一次看到了，最早看到是在一些volantis主题的用户博客那里，比如银河小徐那里，百度了一下也搜到过volantis相关的魔改教程，当时没当回事，直到在今年勇那里想到了相对完善的源码，不过他嵌入的不是很完美，按钮在一个比较尴尬的地方。和我的副标题重合了，js也是依赖于jquery的，和最新版butterfly去jquery的理念相悖，所以心血来潮对这个教程做下完善，顺便去jquery。
魔改步骤
新建,这部分其实实质上就是一个svg文件，通过js操作它的旋转显隐，淡入淡出实现动画效果。
新建,
新建,去除了冗余代码，去jquery。。
修改,在文件末位加上一行：F
修改,把原本的昼夜切换按钮替换掉，
修改,引入一下js，
具体效果就自己切换下夜间模式看看吧。
本文参与?腾讯云自媒体分享计划，分享自作者个人站点/博客。
原始发表：2022-03-11，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读
目录