只用一個js文件，為你的網(wǎng)站加個黑暗模式

幾秒鐘內(nèi)為您的網(wǎng)站添加黑暗模式/夜間模式

Darkmode.Js 是一款開源項目，只需要添加一段代碼，就可以為網(wǎng)站添加夜晚模式/黑暗模式/夜間模式/護眼模式，讓你的網(wǎng)站跟上 UI 界的潮流。

這個庫使用css混合混合模式，以便為您的任何網(wǎng)站帶來黑暗模式。只需復(fù)制粘貼片段，你就會得到一個小部件來打開和關(guān)閉暗模式。您也可以在沒有小部件的情況下以編程方式使用它。這個插件是輕量級的，內(nèi)置于VanillaJS中。默認(rèn)情況下，它還使用localstorage，因此您的上一個設(shè)置將被記住！

小部件自動出現(xiàn)
保存用戶選擇
如果OS首選主題為深色（如果瀏覽器支持首選配色方案），則自動顯示暗模式
可以不使用小部件以編程方式使用

Wordpress插件

如果你正在使用Wordpress，你可能需要看看這些插件基于黑暗模式.js:

https://wordpress.org/plugins/blackout-darkmode-widget/
https://wordpress.org/plugins/darkmode/

如何使用

Darkmode.js 很容易使用，只需復(fù)制粘貼下面的代碼或使用npm包。

簡單方法（使用jsdeliver CDN）

只需將此代碼添加到html頁面：

<script src="https://cdn.jsdelivr.net/npm/darkmode-js@1.5.6/lib/darkmode-js.min.js"></script>
<script>
  function addDarkmodeWidget() {
    new Darkmode().showWidget();
  }
  window.addEventListener('load', addDarkmodeWidget);
</script>

如果要使用npm就用下面的代碼：

npm install darkmode-js

以下是可用的選項：

const options = {
  bottom: '64px', // default: '32px'
  right: 'unset', // default: '32px'
  left: '32px', // default: 'unset'
  time: '0.5s', // default: '0.3s'
  mixColor: '#fff', // default: '#fff'
  backgroundColor: '#fff',  // default: '#fff'
  buttonColorDark: '#100f2c',  // default: '#100f2c'
  buttonColorLight: '#fff', // default: '#fff'
  saveInCookies: false, // default: true,
  label: '', // default: ''
  autoMatchOsTheme: true // default: true
}

const darkmode = new Darkmode(options);
darkmode.showWidget();

如果不想顯示小部件并以編程方式啟用/禁用Darkmode，可以使用toggle（）方法。您還可以檢查是否使用isActivated（）方法激活了darkmode。請在下面的示例中查看它們的實際操作。

const darkmode =  new Darkmode();
darkmode.toggle();
console.log(darkmode.isActivated())

替代樣式

當(dāng)darkmode被激活時，一個CSS類darkmode--activated被添加到body標(biāo)記中。您可以利用它替代樣式并擁有自定義樣式
在不想應(yīng)用暗碼的地方使用darkmode-ignore類
您還可以添加以下樣式：isolation:isolate；在css中，這也會忽略暗碼。
它也可以恢復(fù)黑暗模式與這種風(fēng)格mix-blend-mode: difference;

.darkmode--activated p, .darkmode--activated li {
  color: #000;
}

.button {
  isolation: isolate;
}

.darkmode--activated .logo {
  mix-blend-mode: difference;
}

<span class="darkmode-ignore"><span>

如果不起作用，您可能需要添加以下代碼，但這將使要重寫的類無效。

鈕（button）可能是網(wǎng)頁中最常見的組件之一了，大部分都平淡無奇，如果你碰到的是一個這樣的按鈕，會不會忍不住多點幾次呢？

轉(zhuǎn)載鏈接: https://github.com/XboxYan/notes/issues/16

通常這類效果第一反應(yīng)可能就是借助canvas了，比如下面這個案例點擊預(yù)覽（建議去codepen原鏈接點擊預(yù)覽訪問，segmentfault內(nèi)置的預(yù)覽js會加載失敗）

效果就更加震撼了，當(dāng)然canvas實現(xiàn)也有一定的門檻，而且實際使用起來也略微麻煩（所有js實現(xiàn)的通病），這里嘗試一下CSS的實現(xiàn)方式。

生成粒子

拋開js方案，還有HTML和CSS實現(xiàn)方式。HTML就不用說了，直接寫上大量的標(biāo)簽

<button>
    button
    <i></i>
    <i></i>
    <i></i>
    <i></i>
    <i></i>
    ...
</button>

一般情況下我不是很喜歡這種方式，標(biāo)簽太多，結(jié)構(gòu)不美觀，而且有可能對現(xiàn)有的頁面造成其他影響（很多情況下并不方便修改原始HTML結(jié)構(gòu)）

那么來看看CSS實現(xiàn)方式，主要也是兩種方式，其實就是想一下有哪些屬性可以無限疊加，一個是box-shadow，還有一個是background-image（CSS3支持無限疊加）。

1.box-shadow

我們先看看box-shadow方式，為了避免使用額外標(biāo)簽，這里采用偽元素生成。

.button::before{
  position: absolute;
  content: '';
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background-color: #ff0081;
  box-shadow: 10px 10px #ff0081,15px 0px 0 2px #ff0081,20px 15px 0 3px #ff0081,...;/*無限疊加*/
}

效果還是有的，主要就是多花點時間來調(diào)試，這里主要根據(jù)偏移量和擴展來決定粒子的位置和大小。

不過這里的偏移量只能是px單位，無法很好的自適應(yīng)按鈕的大小，所以這里采用第二種方式來實現(xiàn)

2.background-image

CSS3中background-image是可以無限疊加的，類似于

.myclass {
  background: background1, background2, /*...*/ backgroundN;
}

這里我們可以采用徑向漸變radial-gradient來實現(xiàn)多個小圓點。

.button::before{
  position: absolute;
  content: '';
  left: -2em;
  right: -2em;
  top: -2em;
  bottom: -2em;
  pointer-events: none;
  background-repeat: no-repeat;
  background-image: radial-gradient(circle, #ff0081 20%, transparent 0), 
  radial-gradient(circle, #ff0081 20%, transparent 0),
  radial-gradient(circle, #ff0081 20%, transparent 0), 
  radial-gradient(circle, #ff0081 20%, transparent 0), 
  ...;
  background-size: 10% 10%, 20% 20%, 15% 15%,...;
  background-position: 18% 40%, 20% 31%, 30% 30%,...;
}

這里主要通過background-size和background-position來控制原點的尺寸與位置，看著好像挺復(fù)雜，其實只要background-size和background-position與background-image位置一一對應(yīng)就行了。實際開發(fā)中可能有點難調(diào)試，可以直接在控制臺中通過鍵盤上下左右鍵微調(diào)實時預(yù)覽效果（可以考慮做一個可視化工具）。

這樣就做出了一個簡單的粒子效果。

動起來

雖然background-image不支持CSS動畫，但是另外兩個background-size和background-position支持呀，所以，CSS transition和CSS animation都可以用起來。

動畫效果很簡單，就是粒子從中心往外擴散，并且逐漸消失的過程。

transition

我們先看看:hover交互

.button::before{
  transition:.75s background-position ease-in-out,75s background-size ease-in-out;
}
.button:hover::before{
  background-position: 5% 44%, -5% 20%, 7% 5%...;
  background-size: 0% 0%;
}

當(dāng)然直接這樣設(shè)置肯定是不理想，鼠標(biāo)離開時會收縮回去，效果如下

我們需要是鼠標(biāo)離開時不收縮回去，如何實現(xiàn)呢？

很簡單，把transition設(shè)置在:hover下就可以了，表示只有當(dāng)鼠標(biāo)經(jīng)過時才有過渡，離開時沒有

.button:hover::before{
  background-position: 5% 44%, -5% 20%, 7% 5%...;
  background-size: 0% 0%;
  transition:.75s background-position ease-in-out,75s background-size ease-in-out;
}

這樣是不是感覺稍微好些了呢？點擊這里點擊預(yù)覽查看。

如果我們想做成點擊的時候出現(xiàn)粒子動畫該怎么做呢？這里就需要借助:active偽類了。

如果我們按照:hover邏輯，那么

.button:active::before{
  background-position: 5% 44%, -5% 20%, 7% 5%...;
  background-size: 0% 0%;
  transition:.75s background-position ease-in-out,75s background-size ease-in-out;
}

很遺憾，只有當(dāng)只有按住不動的時候才能觸發(fā)，一旦鼠標(biāo)抬起就沒有了，這個時候我們就需要換個角度了。可以這么想象一下，默認(rèn)就是發(fā)散的，然后點擊的時候聚攏，抬起的時候就會有還原成之前的發(fā)散狀態(tài)，同時，在點擊的時候需要取消掉過渡效果，如下

.button::before {
    /*...*/
    background-position: 5% 44%...;/*擴散的狀態(tài)*/
    background-size: 0% 0%;
    transition: background-position .5s ease-in-out, background-size .75s ease-in-out;
}

.button:active::before {
  transition:0s;/**注意取消掉過渡**/
  background-size: 10% 10%, 20% 20%...;
  background-position: 18% 40%, 20% 31%,...;
}

你可以查看這個demo點擊預(yù)覽

為什么在:active需要transition:0s呢，你可以試下不添加的效果就明白了，如下

animation

animation和transition實現(xiàn)原理比較類似，優(yōu)點是可以做出更加精細(xì)的動畫，這里就拿:active方式來說吧。

.button::before{
  /*...*/
  animation: bubbles ease-in-out .75s forwards;
}
.button:active::before {
  animation: none; /*這里注意取消動畫*/
  background-size: 0;
}
@keyframes bubbles {
  0% {
    background-position: 18% 40%, ...;
  }
  50% {
    background-position: 10% 44%, ...;
  }
  100% {
    background-position: 5% 44%, ...;
    background-size: 0% 0%;
  }
}

可以在這里點擊預(yù)覽查看源碼。

唯一的不足可能是初始化動畫會自執(zhí)行一次。

小結(jié)

上面介紹了純CSS實現(xiàn)一個粒子動效的按鈕，優(yōu)點很明顯，復(fù)制一下CSS直接扔到項目里就能用，管他什么原生項目還是react項目，也無需綁定什么事件，也無需額外的邏輯處理，增強現(xiàn)有體驗。試想一下，如果這是一個‘購買’按鈕，會不會觸發(fā)你多購買幾次呢，反正我肯定是會被吸引住了，哈~缺點也還是有的，比如上面的定位，密密麻麻都是工作量啊，建議這些功能在項目整體完成之后再細(xì)細(xì)打磨，也可以試著做一些可視化工具來減輕工作量，完。

您2019豬事順利，心想事成。

前言

Tab 切換是種很常見的網(wǎng)頁呈現(xiàn)形式，不管是PC或者H5都會經(jīng)常看到，今天就為小伙伴們提供多種純CSS Tab 切換的實現(xiàn)方式，同時對比一下那種代碼更方便，更通俗易懂。

3種純CSS方式實現(xiàn)Tab 切換

純CSS實現(xiàn)都面臨2個問題：

1、如何接收點擊事件？

2、如何操作相關(guān)DOM？

checked 偽類實現(xiàn)純 CSS Tab 切換

擁有 checked 屬性的表單元素， <input type="radio"> 或者 <input type="checkbox"> 能夠接收到點擊事件。

知識點:

1、使用 radio 標(biāo)簽的 :checked 偽類，加上 <label for> 實現(xiàn)純 CSS 捕獲點擊事情

2、使用了 ~ 選擇符對樣式進行控制

<div class="container"> 
 <input class="nav1" id="li1" type="radio" name="nav"> 
 <input class="nav2" id="li2" type="radio" name="nav"> 
 <ul class='nav'> 
 <li class='active'><label for="li1">tab1</label></li> 
 <li><label for="li2">tab2</label></li> 
 </ul> 
 <div class="content"> 
 <div class="content1 default">tab1 內(nèi)容:123456</div> 
 <div class="content2">tab2 內(nèi)容:abcdefgkijkl</div> 
 </div> 
</div>

添加樣式

.container *{ 
 padding: 0; 
 margin: 0; 
} 
.container { 
 position: relative; 
 width: 400px; 
 margin: 50px auto; 
} 
.container input { 
 display: none; 
} 
.nav { 
 position: relative; 
 overflow: hidden; 
} 
.nav li { 
 width: 200px; 
 float: left; 
 text-align: center; 
 background: #ddd; 
 list-style: none; 
} 
.nav li label { 
 display: block; 
 width: 200px; 
 line-height: 36px; 
 font-size: 18px; 
 cursor: pointer; 
} 
.content { 
 position: relative; 
 overflow: hidden; 
 width: 400px; 
 height: 100px; 
 border: 1px solid #999; 
 box-sizing: border-box; 
 padding: 10px; 
} 
.content1, 
.content2 { 
 display: none; 
 width: 100%; 
 height: 100%; 
} 
.nav1:checked ~ .nav li { 
 background: #ddd; 
 color: #000; 
} 
.nav1:checked ~ .nav li:first-child { 
 background: #ff7300; 
 color: #fff; 
} 
.nav2:checked ~ .nav li { 
 background: #ddd; 
 color: #000; 
} 
.nav2:checked ~ .nav li:last-child { 
 background: #ff7300; 
 color: #fff; 
} 
.nav1:checked ~ .content > div { 
 display: none; 
} 
.nav1:checked ~ .content > div:first-child { 
 display: block; 
} 
.nav2:checked ~ .content > div { 
 display: none; 
} 
.nav2:checked ~ .content > div:last-child { 
 display: block; 
} 
.nav li.active { 
 background: #ff7300; 
 color: #fff; 
} 
.content .default { 
 display: block; 
}

target 偽類實現(xiàn)純 CSS Tab 切換

知識點:

1、要使用 :target 偽元素，需要 HTML 錨點，以及錨點對應(yīng)的 HTML 片段

2、核心是使用 :target 偽類接收點擊事件

3、通過兄弟選擇符 ~ 控制樣式

<div class="container"> 
 <div id="content1" class="active">tab 1內(nèi)容:123456</div> 
 <div id="content2">tab 2內(nèi)容:abcdefgkijkl</div> 
 
 <ul class='nav'> 
 <li class="active"><a href="#content1">tab1</a></li> 
 <li><a href="#content2">tab2</a></li> 
 </ul> 
 
 <div class="wrap"></div> 
</div>

添加樣式

.container *{ 
 padding: 0; 
 margin: 0; 
} 
.container { 
 position: relative; 
 width: 400px; 
 margin: 50px auto; 
} 
 
.nav { 
 position: relative; 
 overflow: hidden; 
} 
 
li { 
 width: 200px; 
 float: left; 
 text-align: center; 
 background: #ddd; 
 list-style: none; 
} 
 
li a { 
 display: block; 
 width: 200px; 
 line-height: 36px; 
 font-size: 18px; 
 cursor: pointer; 
 text-decoration: none; 
 color: #000; 
} 
 
#content1, 
#content2 { 
 position: absolute; 
 overflow: hidden; 
 top: 36px; 
 width: 400px; 
 height: 100px; 
 border: 1px solid #999; 
 box-sizing: border-box; 
 padding: 10px; 
} 
 
#content1, 
#content2 { 
 display: none; 
 width: 100%; 
 background: #fff; 
} 
 
#content1:target, 
#content2:target { 
 display: block; 
} 
 
#content1.active { 
 display: block; 
} 
 
.active ~ .nav li:first-child { 
 background: #ff7300; 
 color: #fff; 
} 
 
#content1:target ~ .nav li { 
 background: #ddd; 
 color: #000; 
} 
#content1:target ~ .nav li:first-child { 
 background: #ff7300; 
 color: #fff; 
} 
 
#content2:target ~ .nav li { 
 background: #ddd; 
 color: #000; 
} 
#content2:target ~ .nav li:last-child { 
 background: #ff7300; 
 color: #fff; 
} 
 
.wrap { 
 position: absolute; 
 overflow: hidden; 
 top: 36px; 
 width: 400px; 
 height: 100px; 
 border: 1px solid #999; 
 box-sizing: border-box; 
}

focus-within 來實現(xiàn) tab 切換功能

:focus-within 它表示一個元素獲得焦點，或該元素的后代元素獲得焦點。

重點：它或它的后代獲得焦點。

這也就意味著，它或它的后代獲得焦點，都可以觸發(fā) :focus-within。

知識點

1、這個屬性有點類似 Javascript 的事件冒泡，從可獲焦元素開始一直冒泡到根元素 html，都可以接收觸發(fā) :focus-within 事件

2、本例子的思路就是通過獲焦態(tài)來控制其他選擇器，以及最重要的是利用了父級的 :not(:focus-within) 來設(shè)置默認(rèn)樣式

<div class="container"> 
 <div class="nav-box"> 
 <button class="nav1">tab1</button> 
 <button class="nav2">tab2</button> 
 <div class="content-box"> 
 <div class="content1"> 
 content-1 
 </div> 
 <div class="content2"> 
 content-2 
 </div> 
 </div> 
 </div> 
</div>

添加樣式

.container { 
 width: 300px; 
 margin: 50px auto; 
 padding: 10px; 
 boder: 1px solid #ddd; 
} 
 
.nav-box { 
 font-size: 0; 
} 
 
button { 
 width: 150px; 
 height: 40px; 
 box-sizing: border-box; 
 outline: none; 
 background: #fff; 
 border: 1px solid #ddd; 
 font-size: 18px; 
 cursor: pointer; 
} 
 
button:focus-within { 
 color: #fff; 
 background: #ff7300; 
} 
 
.content-box { 
 font-size: 24px; 
 border: 1px solid #ddd; 
 height: 100px; 
} 
.content-box div { 
 display: none; 
} 
 
.nav-box:not(:focus-within) .nav1 { 
 color: #fff; 
 background: #ff7300; 
} 
.nav-box:not(:focus-within) .content1 { 
 display: block; 
} 
 
.nav1:focus-within ~ .content-box .content1 { 
 display: block; 
} 
 
.nav2:focus-within ~ .content-box .content2 { 
 display: block; 
}

3種純CSS方式實現(xiàn)Tab 切換

這個效果就很差一些，因為，在tab失去焦點時，就會復(fù)原，回到tab1上面，并不推薦這種方式來實現(xiàn)。小編推薦第一種:checked實現(xiàn)方式，更容易理解。

公告

喜歡小編的點擊關(guān)注，了解更多知識！

源碼地址和源文件下載請點擊下方“了解更多”

在線咨詢

上一篇：一個實用的在線工具網(wǎng)站
下一篇：JavaScript 變量

您的項目需求

*請認(rèn)真填寫需求信息，我們會在24小時內(nèi)與您取得聯(lián)系。

整合營銷服務(wù)商

只用一個js文件，為你的網(wǎng)站加個黑暗模式

生成粒子

1.box-shadow

2.background-image

動起來

transition

animation

小結(jié)

前言

checked 偽類實現(xiàn)純 CSS Tab 切換

target 偽類實現(xiàn)純 CSS Tab 切換

focus-within 來實現(xiàn) tab 切換功能

公告

您的項目需求