From b8ecfc1127b4f6ebd9f512f214c53713bebcd24d Mon Sep 17 00:00:00 2001 From: Cell <1024@lruihao.cn> Date: Thu, 25 Jul 2024 11:32:58 +0800 Subject: [PATCH] :lipstick: Style: revert timeline animation to fade style --- README.md | 12 +++++++----- README.zh-cn.md | 12 +++++++----- assets/css/_shortcodes/_timeline.scss | 16 ++++++++++------ 3 files changed, 24 insertions(+), 16 deletions(-) diff --git a/README.md b/README.md index 1d2fb4fe..b2a5746e 100644 --- a/README.md +++ b/README.md @@ -137,7 +137,7 @@ All feedback is welcome! Head over to the [discussions][discussions], [Pull requ | :------------------------- | :------------------------------- | | [Discussions][discussions] | Official GitHub discussion forum | | [FixIt QQ group][qq-group] | Official QQ group: `814031017` | -| [Hugo FixIt Planet][zsxq] | Official Knowledge Planet | +| [Hugo FixIt Planet][zsxq] | Official Knowledge Planet[^2] | [discussions]: https://github.com/hugo-fixit/FixIt/discussions [pulls]: https://github.com/hugo-fixit/FixIt/pulls @@ -211,10 +211,6 @@ Thanks to all the [contributors](https://github.com/hugo-fixit/FixIt/graphs/cont FixIt is licensed under the **MIT** license. Check the [LICENSE file](LICENSE) for details. -## Author - -Follow [Lruihao](https://github.com/Lruihao "Follow me on GitHub") - ## Sponsor [![Open Source Love](https://badges.frapsoft.com/os/v1/open-source.svg?v=103)](https://github.com/hugo-fixit/FixIt) @@ -225,6 +221,12 @@ If you enjoy the theme, please consider buying me a coffee ☕️. Thanks! - [Alipay](images/alipay.jpg) - [PayPal](https://paypal.me/Lruihao) +## Author + +Follow [Lruihao](https://github.com/Lruihao "Follow me on GitHub") + Don't forget to leave a ⭐️ if you like this theme, thanks! + [^1]: The theme name is interesting: "leave it, keep it, love it, fix it". Appears and leaves, loves but cannot keep. Doesn't it look like that damn love and BUG? 🤣 +[^2]: Knowledge Planet is a paid community platform for knowledge sharing and communication. If you need more help and support, you can join our Knowledge Planet. ([Newcomer Coupon～](https://t.zsxq.com/BQcpe)) diff --git a/README.zh-cn.md b/README.zh-cn.md index 0e8d0256..ba04ef8f 100644 --- a/README.zh-cn.md +++ b/README.zh-cn.md @@ -137,7 +137,7 @@ FixIt 支持下列语言： | :--------------------------- | :---------------------- | | [Discussions][discussions] | 官方 GitHub 讨论区 | | [FixIt 主题交流群][qq-group] | 官方 QQ 群：`814031017` | -| [Hugo FixIt 星球][zsxq] | 官方知识星球 | +| [Hugo FixIt 星球][zsxq] | 官方知识星球[^2] | [discussions]: https://github.com/hugo-fixit/FixIt/discussions [pulls]: https://github.com/hugo-fixit/FixIt/pulls @@ -215,10 +215,6 @@ FixIt 支持下列语言： FixIt 根据 **MIT** 许可协议授权。更多信息请查看 [LICENSE 文件](LICENSE)。 -## 作者 - -Follow [Lruihao](https://github.com/Lruihao "在 GitHub 上关注我") - ## 赞助支持 [![Open Source Love](https://badges.frapsoft.com/os/v1/open-source.svg?v=103)](https://github.com/hugo-fixit/FixIt) @@ -229,6 +225,12 @@ Follow [Lruihao](https://github.com/Lruihao "在 GitHub 上关注我") - [支付宝](images/alipay.jpg) - [PayPal](https://paypal.me/Lruihao) +## 作者 + +Follow [Lruihao](https://github.com/Lruihao "在 GitHub 上关注我") + 如果你喜欢这个主题，别忘了留下一颗 ⭐️ 哦，谢谢！ + [^1]: 主题名称趣谈：“leave it, keep it，love it，fix it”。出现又离开，爱而不得。这像不像那该死的爱情和 BUG 呢？🤣 +[^2]: 知识星球是一个付费的知识分享和交流社区平台。如果你需要更多的帮助和支持，可以加入我们的知识星球。（[新人优惠券～](https://t.zsxq.com/BQcpe)） diff --git a/assets/css/_shortcodes/_timeline.scss b/assets/css/_shortcodes/_timeline.scss index 3a46fc8e..237b489b 100644 --- a/assets/css/_shortcodes/_timeline.scss +++ b/assets/css/_shortcodes/_timeline.scss @@ -11,17 +11,21 @@ &[data-animation] { .#{$prefix}timeline-item::before { border-color: var(--timeline-color); - animation-name: change-border-color; - animation-duration: 0.9s; - animation-direction: alternate; + animation-name: border-color-fade; + animation-duration: 2s; animation-iteration-count: infinite; - animation-timing-function: cubic-bezier(0.4, 0, 1, 1); animation-delay: calc(var(--timeline-index) * 0.3s); - @keyframes change-border-color { - to { + @keyframes border-color-fade { + 0% { + border-color: var(--timeline-color); + } + 50% { border-color: var(--timeline-circle-color); } + 100% { + border-color: var(--timeline-color); + } } } }