【3/10】第三個來了，這次寫了一個拉繩的簡單影片來開關dark mode，效果如圖所示，
在線預覽鏈接，附原始碼！
目標依舊是十種方式來實作，還在學習前端的基礎🙊
大伙見過用過其他形式的dark mode可以發一下，讓我見見世面，我也可以復刻一下！
上代碼！
很簡單的代碼，我簡單解釋一下🦍
🦭HTML
<h1>Mancuoj</h1>
<div id="switch"></div>
🐬SCSS
都一樣，SCSS嵌套寫起來簡單點兒
一些基礎設定
@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@300&display=swap");
$dark-color: #111;
$light-color: #eee;
$bg-color: #4c6fff;
*,
* *,
*::before,
*::after {
box-sizing: border-box;
}
body {
margin: 0;
padding: 0;
display: flex;
align-items: center;
justify-content: center;
height: 100vh;
font-family: Poppins, serif;
}
畫出開關
偽元素
::before可以在所選元素之前或之后添加一些內容，必須配合
content來使用，這個屬性通常用來給元素添加內容諸如圖片或者文字，
content屬性是必需的，用來實作形狀時值可以是空字串，
top: -100px，我們藏起來100px長度來做影片?
#switch {
position: fixed;
height: 300px;
width: 2px;
background: $bg_color;
right: 30%;
top: -100px;
cursor: pointer;
&::after {
content: "";
position: absolute;
border: 2px solid $bg-color;
border-radius: 50%;
width: 22px;
height: 22px;
left: -10px;
bottom: -20px;
}
}
寫個拉繩的影片
具體可以看animation - CSS（層疊樣式表） | MDN (mozilla.org)
影片就是把藏起來的100px放出來再識訓去🎈
@keyframes line {
0% {
transform: translateY(0);
}
50% {
transform: translateY(100px);
}
100% {
transform: translateY(0);
}
}
.pull {
animation: line 0.5s ease;
}
dark mode
依舊是最簡單的實作，只改了背景和文本的顏色，有需要可以自行添加~
.dark {
background-color: $dark-color;
color: $light-color;
}
🐋JS
JS跟前兩個差不多，稍微改改繼續用😎
點擊時加上影片，完成后再移除，需要用
setTimeout()設定一個時間間隔，
const changeTheme = () => {
const sw = document.getElementById("switch");
sw.addEventListener("click", () => {
sw.classList.add("pull");
if (!document.body.classList.contains("dark")) {
document.body.classList.add("dark");
localStorage.setItem("css", "dark");
} else {
document.body.classList.remove("dark");
localStorage.removeItem("css");
}
setTimeout(() => {
sw.classList.remove("pull");
}, 600);
});
if (localStorage.getItem("css")) {
document.body.classList.add("dark");
}
};
changeTheme();
前兩個的🔗
給你的網頁添加一個暗黑模式（壹：簡單實作）
給你的網頁添加一個暗黑模式（貳：完美按鈕）
轉載請註明出處，本文鏈接：https://www.uj5u.com/ruanti/354688.html
標籤：其他
上一篇：萬字+圖片決議計算機網路應用層