一个切换夜间模式的组件

大家好，我是半夏👴，一个刚刚开始写文的沙雕程序员.如果喜欢我的文章，可以关注➕ 点赞 👍 加我微信：frontendpicker，邀你进群，一起学习交流前端，成为更优秀的工程师～关注公众号：半夏话前端,了解更多前端知识！点我探索新世界！

前言

个人网站，你要是没有切换夜间模式的功能，就感觉少点啥。无论是CSS方案，还是JS+CSS方案，你都得有一个按钮吧😝最近我也是完善网站功能的时候，想整一个花里胡哨的按钮，作为一个缺乏创意的切图仔，我还是用现成的吧！面向CV变成总归是极舒服的！

申明：本文章效果，非笔者实现，仅学习自互联网，并贴上对应链接。本文起到分析其中的代码的作用

原地址

https://codepen.io/bheberer/pen/BaNZKmq

点击的时候会切换icon的位，并且按钮会切换颜色。

实现思路

用lable替代checkbox

最根本的：隐藏input，使用label来修改样式。

<label>
	<input type='checkbox'></input>
</label>
input {
    position: absolute;
    opacity: 0;
    cursor: pointer;
    height: 0;
    width: 0;
}

将input定义在label内部，此时点击label ，checkbox选中，效果和使用for是一致的。

定义三个icon

这里的图标使用的是第三方的。https://iconify.design/。Iconify 图标集合包括来自流行字体和表情符号集的100,000 多个图标：Font Awesome 4 和 5、Material Design Icons、IonIcons、Vaadin Icons、Entypo+等等。

<div class='toggle-slot'>
	
    <div class='sun-icon-wrapper'>
   	 <div class="iconify sun-icon" data-icon="feather-sun" data-inline="false"></div>
    </div>
    <div class='toggle-button'></div>
    <div class='moon-icon-wrapper'>
   		 <div class="iconify moon-icon" data-icon="feather-moon" data-inline="false"></div>
    </div>
</div>

sun-icon-wrapper是太阳，toggle-button是圆环按钮，moon-icon-wrapper是月亮。

初始状态-白天

toggle-slot

背景颜色的:background-color: white;

太阳

.sun-icon {
    position: absolute;
    color: #ffbb52;
}

.sun-icon-wrapper {
    position: absolute;
    opacity: 1;
    transform: translate(2em, 2em) rotate(15deg);
}

太阳的颜色是黄色，位置默认在左边。并且设置父元素透明度为1，即可见。

圆环button

利用 transform: translate(11.75em, 1.75em);，将移动到左边。设置颜色是黄色

 .toggle-button {
            transform: translate(11.75em, 1.75em);
            position: absolute;
            border-radius: 50%;
            background-color: #ffeccf;       
        }

月亮

月亮此时是隐藏的。通过设置 .moon-icon-wrapper的 opacity:为0。

切换的原理

主要是利用opacity属性，初始的时候：太阳的opacity是1 ，可见。切换到黑夜，此时月亮的opacity是1，即可见。并不需要移动太阳和月亮的位置。只是圆形按钮的位置改变即可。利用checkbox的checked加上 transform: translate，当未选中的时候位于左侧，选中的位置在右侧。

input:checked~.toggle-slot .toggle-button {
    background-color: #485367;
    box-shadow: inset 0px 0px 0px 0.75em white;
    transform: translate(1.75em, 1.75em);
}

input:checked~.toggle-slot .sun-icon-wrapper {
    opacity: 0;
}

input:checked~.toggle-slot .moon-icon-wrapper {
    opacity: 1;
}