我通過鏈接https://dev.to/ananyaneogi/create-a-dark-light-mode-switch-with-css-variables-34l8為我的網(wǎng)頁創(chuàng)建了一個(gè)暗模式 我想添加一個(gè)動(dòng)畫效果，以便當(dāng)應(yīng)用深色模式時(shí)，過渡是平滑的。我該怎么做？我知道 CSS 關(guān)鍵幀用于添加動(dòng)畫，或者可以使用 jQuery，但我似乎不知道如何使用它們。
1 回答
斯蒂芬大帝
TA貢獻(xiàn)1827條經(jīng)驗(yàn) 獲得超8個(gè)贊
您可以使用css 過渡。下面是一個(gè)簡單的例子，點(diǎn)擊代碼片段來轉(zhuǎn)換背景顏色：
const rootDataset = document.documentElement.dataset;
document.onclick = () => {
? ? const inDarkMode = (rootDataset.theme === 'dark');
? ? rootDataset.theme = inDarkMode ? '' : 'dark';
}
:root {
? ? --primary-color: beige;? ??
}
[data-theme="dark"] {
? ? --primary-color: grey;? ??
}
body {
? ? background: var(--primary-color);
? ? transition: background 2s;
}
- 1 回答
- 0 關(guān)注
- 173 瀏覽
添加回答
舉報(bào)
0/150
提交
取消