鐵人賽介紹用文章

2025年09月01日 425 字大概 2 分鐘

這篇記錄我如何在 Kira 主題 加上 Butterfly 風格 的「頭像滑過旋轉、點擊跳轉自介頁」效果。
同時示範：標籤/分類、摘要分隔、程式碼上色、圖片資產夾等常用排版。

文章內會看到很多像 這樣的行內程式碼，以及下面一大段有語法顏色的區塊程式碼。

成品預覽

滑鼠移到頭像 → 平滑旋轉一圈
點擊頭像 → 直接導向 /about/ 自我介紹頁面

1) 兩段小改動（CSS + JS）

檔名：source/style.css（或你的自訂樣式檔）
功能：滑過旋轉一圈

/* Avatar hover 旋轉一圈 */
.site-avatar img,
.avatar img,
.kira-avatar img,
.site-author-image img {
  transition: transform .6s cubic-bezier(.22,.61,.36,1);
  transform-origin: center center;
  will-change: transform;
}
.site-avatar:hover img,
.avatar:hover img,
.kira-avatar:hover img,
.site-author-image:hover img {
  transform: rotate(360deg);
}

/* 無障礙：偏好減少動態時停用動畫 */
@media (prefers-reduced-motion: reduce) {
  .site-avatar img,
  .avatar img,
  .kira-avatar img,
  .site-author-image img { transition: none; }
  .site-avatar:hover img,
  .avatar:hover img,
  .kira-avatar:hover img,
  .site-author-image:hover img { transform: none; }
}

其他功能展示

播放自己音樂

撥放街聲音樂

撥放bilibili影片

留言區從原本需要登入github才能留言的方式改成使用 Twikoo 不須登入即可留言
如果你要匿名的話姓名、郵箱、網址可以隨便打沒關係
留QQ郵箱的話可以自動偵測郵箱頭像
有想多交流的話可以留網址我看到會過去逛逛