我通過鏈接https://dev.to/ananyaneogi/create-a-dark-light-mode-switch-with-css-variables-34l8為我的網頁創建了一個暗模式 我想添加一個動畫效果，以便當應用深色模式時，過渡是平滑的。我該怎么做？我知道 CSS 關鍵幀用于添加動畫，或者可以使用 jQuery，但我似乎不知道如何使用它們。
1 回答
斯蒂芬大帝
TA貢獻1827條經驗 獲得超8個贊
您可以使用css 過渡。下面是一個簡單的例子，點擊代碼片段來轉換背景顏色：
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 關注
- 176 瀏覽
添加回答
舉報
0/150
提交
取消