超炫酷的 CSS 主題切換動畫按鈕，附保姆級教程！
作者：小星
今天我帶大家來實現一個精美炫酷的CSS主題切換動畫按鈕，免費開源。這是一個用于主題切換的 SVG 圖標動畫，該動畫通過 SVG 和 CSS 實現，允許用戶在淺色和深色主題之間切換，同時圖標本身也具有光暈效果和軌跡效果的動畫。最終效果是一個具有視覺吸引力和交互性的主題切換按鈕。
大家好，我是開源小星呀！我的目標是每天分享超有用的開源項目。
今天我帶大家來實現一個精美炫酷的CSS主題切換動畫按鈕，免費開源。
動畫介紹
這是一個用于主題切換的 SVG 圖標動畫，該動畫通過 SVG 和 CSS 實現，允許用戶在淺色和深色主題之間切換，同時圖標本身也具有光暈效果和軌跡效果的動畫。最終效果是一個具有視覺吸引力和交互性的主題切換按鈕。
動畫預覽
圖片
實現過程
項目包含三個主要文件：
- index.html：定義頁面結構和svg按鈕圖標。
- style.css：包含所有明暗主題的 CSS 樣式和動畫定義。
- script.js：實現主題切換的 JavaScript 邏輯。
按鈕的SVG定義
SVG 文件定義了一個復雜的月亮形狀圖標，包含多個嵌套的元素，每個元素都有特定的樣式和動畫效果。
下面的代碼定義了月亮圖標的主體輪廓，是繪制月亮形狀的核心部分：
<svg class="main" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<g>
<path class="outline" d="M9.8815 1.36438L9.88141 1.36429C9.70639 1.18942 9.48342 1.07041 9.24073 1.02235C8.99803 0.974286 8.74653 0.999323 8.51808 1.09429L8.51753 1.09452C4.54484 2.75146 1.75 6.6732 1.75 11.25C1.75 17.3262 6.67489 22.25 12.75 22.25C14.9217 22.2501 17.0448 21.6075 18.852 20.4032C20.6591 19.1989 22.0695 17.4868 22.9055 15.4825L22.9058 15.4818C23.0007 15.2532 23.0256 15.0015 22.9774 14.7587C22.9291 14.5159 22.8099 14.2929 22.6348 14.118C22.4597 13.9431 22.2366 13.8241 21.9937 13.7761C21.7509 13.7281 21.4993 13.7533 21.2708 13.8484L21.2707 13.8485C20.2346 14.2801 19.1231 14.5016 18.0007 14.5H18C15.7457 14.5 13.5837 13.6045 11.9896 12.0104C10.3955 10.4163 9.5 8.25433 9.5 5.99999L9.5 5.99927C9.49838 4.8769 9.71983 3.76541 10.1515 2.72938C10.2468 2.50072 10.2721 2.24888 10.224 2.00584C10.1759 1.76281 10.0567 1.53954 9.8815 1.36438Z" fill="black" stroke="black" stroke-width="2"/>
<!-- 其他路徑和元素 -->
</g>
</svg>下面這部分代碼定義了月亮圖標內部的形狀和細節：
<g class="inner">
<path class="inner-face" fill-rule="evenodd" clip-rule="evenodd" d="M9.528 1.71799C9.63312 1.82308 9.70465 1.95704 9.73349 2.10286C9.76234 2.24868 9.7472 2.39979 9.69 2.53699C9.23282 3.6342 8.99828 4.81134 9 5.99999C9 8.38694 9.94821 10.6761 11.636 12.3639C13.3239 14.0518 15.6131 15 18 15C19.1886 15.0017 20.3658 14.7672 21.463 14.31C21.6001 14.2529 21.7511 14.2378 21.8968 14.2666C22.0425 14.2954 22.1763 14.3668 22.2814 14.4717C22.3865 14.5767 22.458 14.7105 22.487 14.8562C22.5159 15.0018 22.501 15.1528 22.444 15.29C21.646 17.2032 20.2997 18.8376 18.5747 19.9871C16.8496 21.1367 14.823 21.7501 12.75 21.75C6.951 21.75 2.25 17.05 2.25 11.25C2.25 6.88199 4.917 3.13799 8.71 1.55599C8.84707 1.49901 8.99797 1.48399 9.14359 1.51282C9.28921 1.54166 9.42299 1.61307 9.528 1.71799Z"/>
<!-- 其他內部形狀元素 -->
</g>最終效果如下圖所示：
圖片
圖片
按鈕的CSS樣式定義
這個動畫按鈕的核心在于CSS樣式。
css文件中定義的是實現光暈效果、軌跡效果以及主題切換的動畫效果的核心CSS代碼。
首先在 :root 偽類中定義了一些 CSS 變量，這些變量用于控制動畫的時序和過渡效果：
:root {
--step: 0.5s;
--ease: linear(
00%,
0.234212.49%,
0.437424.99%,
0.609337.49%,
0.683543.74%,
0.749949.99%,
0.808656.25%,
0.859362.5%,
0.902368.75%,
0.937575%,
0.964881.25%,
0.984487.5%,
0.996193.75%,
1100%
);
}- --step：定義了動畫的基本時間步長為 0.5 秒。
- --ease：定義了一個自定義的緩動函數，用于實現平滑的過渡效果。
接下來定義光暈效果，光暈效果的動畫主要通過改變 SVG 元素的 opacity 屬性來實現：
.glow {
opacity: 1;
transition-property: opacity;
transition-duration: 1.25s;
transition-timing-function: linear(
00%,
0.00396.25%,
0.015612.5%,
0.035218.75%,
0.062525%,
0.097731.25%,
0.140737.5%,
0.191443.74%,
0.249949.99%,
0.316456.25%,
0.390662.5%,
0.562575%,
0.765687.5%,
1100%
);
}- opacity: 1：初始時光暈效果是完全可見的。
- transition-property: opacity：指定動畫的屬性為 opacity。
- ransition-duration: 1.25s：動畫持續時間為 1.25 秒。
- transition-timing-function：使用自定義的緩動函數，使光暈效果的透明度變化更加平滑和自然。
然后是軌跡效果，軌跡效果的動畫通過改變 SVG 元素的 stroke-dashoffset 和 opacity 屬性來實現：
.trail {
stroke-dasharray: 10 80;
stroke-dashoffset: 10;
opacity: 0;
transition-property: stroke-dashoffset, opacity;
transition-duration: calc(var(--step) * 3), calc(var(--step) * 0.5);
transition-timing-function: var(--ease);
}- stroke-dasharray: 10 80：定義了軌跡的虛線樣式，每段虛線的長度為 10，間隔為 80。
- stroke-dashoffset: 10：初始時軌跡的偏移量為 10，使軌跡從中間開始繪制。
- opacity: 0：初始時軌跡是完全透明的。
- transition-property: stroke-dashoffset, opacity：指定動畫的屬性為 stroke-dashoffset 和 opacity。
- transition-duration: calc(var(--step) * 3), calc(var(--step) * 0.5)：動畫持續時間分別為 --step 的 3 倍和 0.5 倍。
- transition-timing-function: var(--ease)：使用自定義的緩動函數，使軌跡效果的動畫更加平滑和自然。
通過光暈和軌跡的實現，我們的月亮圖標出現如下圖的效果，一條青藍色的軌跡線環繞月亮外邊框閃動：
圖片
最后是主題切換動畫，主題切換動畫主要通過改變頁面的 data-theme 屬性來觸發，從而改變背景顏色、文字顏色等樣式：
[data-theme='light'] {
--line: hsl(00%10% / 0.3);
color-scheme: light only;
}
[data-theme='dark'] {
--line: hsl(00%100% / 0.3);
color-scheme: dark only;
}這部分代碼就不多做解釋了，非常簡單，相信大家應該都可以看懂，無非就是兩種主題下的線面顏色定義。
主題切換的JS實現
到JS部分就簡單多了，無非就是給按鈕綁定點擊事件，實現按鈕點擊后的主題切換效果。
首先定義一個配置對象 config，包含主題信息：
const config = {
theme: 'dark'
};然后定義主題更新方法，創建 update 函數，用于根據當前主題更新頁面的 data-theme 屬性：
const update = () => {
document.documentElement.dataset.theme = config.theme;
};最后給按鈕綁定點擊事件，實現主題切換：
const toggle = document.querySelector('.toggle');
const handleToggle = () => {
const light = !!toggle.matches('[aria-pressed="false"]');
toggle.setAttribute('aria-pressed', light);
config.theme = light ? 'light' : 'dark';
update();
};
toggle.addEventListener('click', handleToggle);這個CSS主題切換動畫按鈕就介紹到這里了，希望大家喜歡。
責任編輯：武曉燕
來源：
開源之星
