一个切换夜间模式的组件
大家好,我是半夏👴,一个刚刚开始写文的沙雕程序员.如果喜欢我的文章,可以关注➕ 点赞 👍 加我微信: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;
}
- 点赞
- 收藏
- 关注作者
评论(0)