超炫酷的 CSS 主題切換動(dòng)畫按鈕，附保姆級(jí)教程！
大家好，我是開源小星呀！我的目標(biāo)是每天分享超有用的開源項(xiàng)目。
今天我?guī)Т蠹襾?lái)實(shí)現(xiàn)一個(gè)精美炫酷的CSS主題切換動(dòng)畫按鈕，免費(fèi)開源。
動(dòng)畫介紹
這是一個(gè)用于主題切換的 SVG 圖標(biāo)動(dòng)畫，該動(dòng)畫通過(guò) SVG 和 CSS 實(shí)現(xiàn)，允許用戶在淺色和深色主題之間切換，同時(shí)圖標(biāo)本身也具有光暈效果和軌跡效果的動(dòng)畫。最終效果是一個(gè)具有視覺吸引力和交互性的主題切換按鈕。
動(dòng)畫預(yù)覽
圖片
實(shí)現(xiàn)過(guò)程
項(xiàng)目包含三個(gè)主要文件：
- index.html：定義頁(yè)面結(jié)構(gòu)和svg按鈕圖標(biāo)。
- style.css：包含所有明暗主題的 CSS 樣式和動(dòng)畫定義。
- script.js：實(shí)現(xiàn)主題切換的 JavaScript 邏輯。
按鈕的SVG定義
SVG 文件定義了一個(gè)復(fù)雜的月亮形狀圖標(biāo)，包含多個(gè)嵌套的元素，每個(gè)元素都有特定的樣式和動(dòng)畫效果。
下面的代碼定義了月亮圖標(biāo)的主體輪廓，是繪制月亮形狀的核心部分：
<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>下面這部分代碼定義了月亮圖標(biāo)內(nèi)部的形狀和細(xì)節(jié)：
<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"/>
<!-- 其他內(nèi)部形狀元素 -->
</g>最終效果如下圖所示：
圖片
圖片
按鈕的CSS樣式定義
這個(gè)動(dòng)畫按鈕的核心在于CSS樣式。
css文件中定義的是實(shí)現(xiàn)光暈效果、軌跡效果以及主題切換的動(dòng)畫效果的核心CSS代碼。
首先在 :root 偽類中定義了一些 CSS 變量，這些變量用于控制動(dòng)畫的時(shí)序和過(guò)渡效果：
: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：定義了動(dòng)畫的基本時(shí)間步長(zhǎng)為 0.5 秒。
- --ease：定義了一個(gè)自定義的緩動(dòng)函數(shù)，用于實(shí)現(xiàn)平滑的過(guò)渡效果。
接下來(lái)定義光暈效果，光暈效果的動(dòng)畫主要通過(guò)改變 SVG 元素的 opacity 屬性來(lái)實(shí)現(xiàn)：
.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：初始時(shí)光暈效果是完全可見的。
- transition-property: opacity：指定動(dòng)畫的屬性為 opacity。
- ransition-duration: 1.25s：動(dòng)畫持續(xù)時(shí)間為 1.25 秒。
- transition-timing-function：使用自定義的緩動(dòng)函數(shù)，使光暈效果的透明度變化更加平滑和自然。
然后是軌跡效果，軌跡效果的動(dòng)畫通過(guò)改變 SVG 元素的 stroke-dashoffset 和 opacity 屬性來(lái)實(shí)現(xiàn)：
.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：定義了軌跡的虛線樣式，每段虛線的長(zhǎng)度為 10，間隔為 80。
- stroke-dashoffset: 10：初始時(shí)軌跡的偏移量為 10，使軌跡從中間開始繪制。
- opacity: 0：初始時(shí)軌跡是完全透明的。
- transition-property: stroke-dashoffset, opacity：指定動(dòng)畫的屬性為 stroke-dashoffset 和 opacity。
- transition-duration: calc(var(--step) * 3), calc(var(--step) * 0.5)：動(dòng)畫持續(xù)時(shí)間分別為 --step 的 3 倍和 0.5 倍。
- transition-timing-function: var(--ease)：使用自定義的緩動(dòng)函數(shù)，使軌跡效果的動(dòng)畫更加平滑和自然。
通過(guò)光暈和軌跡的實(shí)現(xiàn)，我們的月亮圖標(biāo)出現(xiàn)如下圖的效果，一條青藍(lán)色的軌跡線環(huán)繞月亮外邊框閃動(dòng)：
圖片
最后是主題切換動(dòng)畫，主題切換動(dòng)畫主要通過(guò)改變頁(yè)面的 data-theme 屬性來(lái)觸發(fā)，從而改變背景顏色、文字顏色等樣式：
[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;
}這部分代碼就不多做解釋了，非常簡(jiǎn)單，相信大家應(yīng)該都可以看懂，無(wú)非就是兩種主題下的線面顏色定義。
主題切換的JS實(shí)現(xiàn)
到JS部分就簡(jiǎn)單多了，無(wú)非就是給按鈕綁定點(diǎn)擊事件，實(shí)現(xiàn)按鈕點(diǎn)擊后的主題切換效果。
首先定義一個(gè)配置對(duì)象 config，包含主題信息：
const config = {
theme: 'dark'
};然后定義主題更新方法，創(chuàng)建 update 函數(shù)，用于根據(jù)當(dāng)前主題更新頁(yè)面的 data-theme 屬性：
const update = () => {
document.documentElement.dataset.theme = config.theme;
};最后給按鈕綁定點(diǎn)擊事件，實(shí)現(xiàn)主題切換：
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);這個(gè)CSS主題切換動(dòng)畫按鈕就介紹到這里了，希望大家喜歡。
