标签搜索
隐藏侧边栏

一个切换夜间模式的组件

搞前端的半夏
2022-05-17 / 0 评论 / 1 点赞 / 243 阅读 / 2,051 字 / 正在检测是否收录...
温馨提示:
本文最后更新于 2022-05-17,若内容或图片失效,请留言反馈。部分素材来自网络,若不小心影响到您的利益,请联系我们删除。

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

前言

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

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

原地址

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

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

暗黑模式1


实现思路

用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 和 5Material Design IconsIonIconsVaadin IconsEntypo+等等。

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

image-20211124211439960

太阳

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

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

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

image-20211124211911548

圆环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。

image-20211124212234967

切换的原理

主要是利用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;
}
0

评论区