只用一个js文件，为你的网站加个黑暗模式

几秒钟内为您的网站添加黑暗模式/夜间模式

Darkmode.Js 是一款开源项目，只需要添加一段代码，就可以为网站添加夜晚模式/黑暗模式/夜间模式/护眼模式，让你的网站跟上 UI 界的潮流。

这个库使用css混合混合模式，以便为您的任何网站带来黑暗模式。只需复制粘贴片段，你就会得到一个小部件来打开和关闭暗模式。您也可以在没有小部件的情况下以编程方式使用它。这个插件是轻量级的，内置于VanillaJS中。默认情况下，它还使用localstorage，因此您的上一个设置将被记住！

小部件自动出现
保存用户选择
如果OS首选主题为深色（如果浏览器支持首选配色方案），则自动显示暗模式
可以不使用小部件以编程方式使用

Wordpress插件

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

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

如何使用

Darkmode.js 很容易使用，只需复制粘贴下面的代码或使用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())

替代样式

当darkmode被激活时，一个CSS类darkmode--activated被添加到body标记中。您可以利用它替代样式并拥有自定义样式
在不想应用暗码的地方使用darkmode-ignore类
您还可以添加以下样式：isolation:isolate；在css中，这也会忽略暗码。
它也可以恢复黑暗模式与这种风格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）可能是网页中最常见的组件之一了，大部分都平淡无奇，如果你碰到的是一个这样的按钮，会不会忍不住多点几次呢？

转载链接: https://github.com/XboxYan/notes/issues/16

通常这类效果第一反应可能就是借助canvas了，比如下面这个案例点击预览（建议去codepen原链接点击预览访问，segmentfault内置的预览js会加载失败）

效果就更加震撼了，当然canvas实现也有一定的门槛，而且实际使用起来也略微麻烦（所有js实现的通病），这里尝试一下CSS的实现方式。

生成粒子

抛开js方案，还有HTML和CSS实现方式。HTML就不用说了，直接写上大量的标签

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

一般情况下我不是很喜欢这种方式，标签太多，结构不美观，而且有可能对现有的页面造成其他影响（很多情况下并不方便修改原始HTML结构）

那么来看看CSS实现方式，主要也是两种方式，其实就是想一下有哪些属性可以无限叠加，一个是box-shadow，还有一个是background-image（CSS3支持无限叠加）。

1.box-shadow

我们先看看box-shadow方式，为了避免使用额外标签，这里采用伪元素生成。

.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,...;/*无限叠加*/
}

效果还是有的，主要就是多花点时间来调试，这里主要根据偏移量和扩展来决定粒子的位置和大小。

不过这里的偏移量只能是px单位，无法很好的自适应按钮的大小，所以这里采用第二种方式来实现

2.background-image

CSS3中background-image是可以无限叠加的，类似于

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

这里我们可以采用径向渐变radial-gradient来实现多个小圆点。

.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来控制原点的尺寸与位置，看着好像挺复杂，其实只要background-size和background-position与background-image位置一一对应就行了。实际开发中可能有点难调试，可以直接在控制台中通过键盘上下左右键微调实时预览效果（可以考虑做一个可视化工具）。

这样就做出了一个简单的粒子效果。

动起来

虽然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%;
}

当然直接这样设置肯定是不理想，鼠标离开时会收缩回去，效果如下

我们需要是鼠标离开时不收缩回去，如何实现呢？

很简单，把transition设置在:hover下就可以了，表示只有当鼠标经过时才有过渡，离开时没有

.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;
}

这样是不是感觉稍微好些了呢？点击这里点击预览查看。

如果我们想做成点击的时候出现粒子动画该怎么做呢？这里就需要借助: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;
}

很遗憾，只有当只有按住不动的时候才能触发，一旦鼠标抬起就没有了，这个时候我们就需要换个角度了。可以这么想象一下，默认就是发散的，然后点击的时候聚拢，抬起的时候就会有还原成之前的发散状态，同时，在点击的时候需要取消掉过渡效果，如下

.button::before {
    /*...*/
    background-position: 5% 44%...;/*扩散的状态*/
    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点击预览

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

animation

animation和transition实现原理比较类似，优点是可以做出更加精细的动画，这里就拿: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%;
  }
}

可以在这里点击预览查看源码。

唯一的不足可能是初始化动画会自执行一次。

小结

上面介绍了纯CSS实现一个粒子动效的按钮，优点很明显，复制一下CSS直接扔到项目里就能用，管他什么原生项目还是react项目，也无需绑定什么事件，也无需额外的逻辑处理，增强现有体验。试想一下，如果这是一个‘购买’按钮，会不会触发你多购买几次呢，反正我肯定是会被吸引住了，哈~缺点也还是有的，比如上面的定位，密密麻麻都是工作量啊，建议这些功能在项目整体完成之后再细细打磨，也可以试着做一些可视化工具来减轻工作量，完。

您2019猪事顺利，心想事成。

前言

Tab 切换是种很常见的网页呈现形式，不管是PC或者H5都会经常看到，今天就为小伙伴们提供多种纯CSS Tab 切换的实现方式，同时对比一下那种代码更方便，更通俗易懂。

3种纯CSS方式实现Tab 切换

纯CSS实现都面临2个问题：

1、如何接收点击事件？

2、如何操作相关DOM？

checked 伪类实现纯 CSS Tab 切换

拥有 checked 属性的表单元素， <input type="radio"> 或者 <input type="checkbox"> 能够接收到点击事件。

知识点:

1、使用 radio 标签的 :checked 伪类，加上 <label for> 实现纯 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 内容:123456</div> 
 <div class="content2">tab2 内容: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 伪类实现纯 CSS Tab 切换

知识点:

1、要使用 :target 伪元素，需要 HTML 锚点，以及锚点对应的 HTML 片段

2、核心是使用 :target 伪类接收点击事件

3、通过兄弟选择符 ~ 控制样式

<div class="container"> 
 <div id="content1" class="active">tab 1内容:123456</div> 
 <div id="content2">tab 2内容: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 来实现 tab 切换功能

:focus-within 它表示一个元素获得焦点，或该元素的后代元素获得焦点。

重点：它或它的后代获得焦点。

这也就意味着，它或它的后代获得焦点，都可以触发 :focus-within。

知识点

1、这个属性有点类似 Javascript 的事件冒泡，从可获焦元素开始一直冒泡到根元素 html，都可以接收触发 :focus-within 事件

2、本例子的思路就是通过获焦态来控制其他选择器，以及最重要的是利用了父级的 :not(:focus-within) 来设置默认样式

<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方式实现Tab 切换

这个效果就很差一些，因为，在tab失去焦点时，就会复原，回到tab1上面，并不推荐这种方式来实现。小编推荐第一种:checked实现方式，更容易理解。

公告

喜欢小编的点击关注，了解更多知识！

源码地址和源文件下载请点击下方“了解更多”

在线咨询

上一篇：一个实用的在线工具网站
下一篇：JavaScript 变量

您的项目需求

*请认真填写需求信息，我们会在24小时内与您取得联系。

整合营销服务商

只用一个js文件，为你的网站加个黑暗模式

生成粒子

1.box-shadow

2.background-image

动起来

transition

animation

小结

前言

checked 伪类实现纯 CSS Tab 切换

target 伪类实现纯 CSS Tab 切换

focus-within 来实现 tab 切换功能

公告

您的项目需求