最近在网上刷到一个短视频——怎么用一个按钮气死前端， 设计师与程序员的矛盾就是的这么产生的。

这个夜间模式切换开关效果看着很是炫酷，但确实有难为我们前端人员的嫌疑。

我相信所有前端程序员的心里是

万马奔腾·······

不管效果看起来多么复杂，聪明勇敢的前端人总是能想出办法来实现，最近就看到codepen上的大神就把这个切换效果做出来了。纯纯硬核代码完全实现，源代码已在文末整理好。我们来分析一下大神是怎么搞定这个表态的效果的！

 动效分析

基于开关的动画效果可以将相关动画步骤进行模块拆分，大概可以拆分为下列模块：

首先我们可以将代码拆分为几大模块， 来一一实现。

• 首先背景是根据开关整个页面背景换为暗色。

• 开关的内部从太阳变成月亮，圆形由黄变灰。

• 按钮内部背景色，由蓝变黑。

• 按钮内部有三个透明度不一的大圆跟随切换

• 开关状态为白天的时候，会有两朵云彩其中并有个飞机飞过。

• 开关状态为黑夜的时候，会有星星闪烁，还有宇航员熊飞过。

主要的动效就是这些，具体的还有很多细节，比如开关边缘的阴影效果，状态切换时候的贝塞尔曲线效果，等等，我们这篇文章主要解析核心代码，细节的代码也会在全代码文件里，有兴趣的可以去研究！

 需要的知识点
在开始写代码之前我们知道这几个知识点。首先，是以元素以aria- 开头的属性。aria 英文全称：Accessible Rich Internet Application，翻译成中文就是：可访问的富互联网应用程序。其实它是一组属性，定义了使残疾人更容易访问 web 内容和 web 应用程序（尤其是使用JavaScript开发的应用程序）的方法。
这类属性的作用是为了增强网页在残障辅助阅读设备上的识别读取。aria 是一种比较新的辅助访问技术，用来弥补 HTML 和 JS 本身对可访问性方面的不足。支持 aria 并不是必须或者强制的，但是支持 aria 会让你的应用变得更友好，更健壮。
我们会用到，aria-pressedARIA属性，指示按钮的状态打开关闭混合。他可以表示：

• aria-pressed="false"：可以表示按钮为关闭。

• aria-pressed="true"：可以表示按钮为开启

• aria-pressed="mixed"：可以表示按钮为混合状态，

其次是CSS函数 var()此函数用于引用先定义的变量值。语法：var(--variable-name, default-value)，--variable-name 表示变量名称，以两个连字符（--）开头，是任何自定义名称。default-value 是可选的，表示在指定变量未定义或无效时要使用的默认值。
举个栗子假设定义 --dark ，当其值为1的时候，最终的代码则是 scale: 1，如果 --dark 没有定义则最终的代码是 scale: 0：

这些变量让我们更轻松地维护更新。所以我们可以得到：

这样我们也就得到--dark 的值，这样也就可以控制整体页面的明暗，颜色等属性。

我们写这个按钮会用到很多这个属性，来控制元素的隐藏显示和一些动画效果

硬核代码实现

按钮背景切换

我们开始研究代码的实现首先实现开关内部背景颜色的切换，核心代码如下：

我们通过--dark 的变化更改 background ，也就是 --sky 和 --night 的值，

(tips：hsl 格式的色值，后面两个参数的值是需要百分比格式的值)

整个页面的背景切换是在按钮点击的时候

就会给body设置 data-dark-mode 属性。

通过 data-dark-mode 得到不同的值。

按钮内部的背景色切换

然后就是按钮内部的太阳转变为月亮，也就是黄色变成灰色。

整个过程我们发现，切换后的灰色

然后是开关内部的圆由黄色（太阳的效果）切换为灰色（月亮的效果）

观察后发现，切换动画中，灰色圆由右至左的覆盖黄色圆， 灰色圆层级高于黄色。

那么我们不难发现，效果的实现方式可以用定位和父子元素，即灰色圆是黄色的子元素。

动画过程：

1）整个圆从左往右平移当 --dark 无定义时最终为0当---dark 为1时，需要平移当前总宽度减去自身圆的宽度的距离，即「3 / 8 * var(--width)」。

2）圆内的动画月亮的背景元素向左平移X轴的100%，之后修改X轴为0%。

再加上过渡动画

外部的父元素增加了 overflow: hidden，所以默认平移X轴100%是不可见的，大家看下面没有增加 overflow: hidden 代码的效果就更清晰实现的原理了。

背景透明圆的切换动画

这个很简单了radial-gradient 径向渐变绘制三层背景色，掌握好色值渐变开始和结束以及大小。将中心定位于太阳的中心。和太阳做一样的平移动画就可以了。

星空云朵切换动画

因为动效比较复杂，我们可以用svg来实现，源代码就放在最后的源代码里了，云朵分成两个颜色，所有要有两个SVG的代码，所以

白天状态的云朵，并不是左右平移，而是上下，只需改变Y轴的值。

星星闪烁的效果其实就是通svg元素设置缩放动画，可以给不同的星星设置不同的执行时间和延迟执行时间。

宇航员 & 小飞机

这两个元素都有动画效果，宇航员一边飘过一边旋转，小飞机也缓缓上升。

最后

到了这的我们基本就已经搞定了整个按钮的核心功能，实现了交互效果，但有一些细节的阴影，过渡，本塞尔曲线等没有进行具体的介绍。