大家好，我是半夏👴，一个刚刚开始写文的沙雕程序员.如果喜欢我的文章，可以关注➕ 点赞 👍 加我微信：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;
}
评论区