大家好,我是 Just,这里是「设计师工作日常」,今天给大家分享的是使用 css 来实现一个暗黑模式切换开关按钮的效果。

《有趣的css》系列最新实例通过公众号「设计师工作日常」发布。


(目录)

整体效果

💎知识点: 1️⃣ transition 过渡属性 2️⃣ :before:after 伪元素选择器 3️⃣ content 属性 4️⃣ :checked 选择器 5️⃣ appearance 自定义外观属性

🔑思路:自定义多选框外观,然后通过实现过渡动画来切换日夜模式图标,并且改变提示文字。

适用于切换网页的日夜模式界面,图标的过渡动画可以增强用户的交互效果。


核心代码部分,简要说明了写法思路;完整代码在最后,可直接复制到本地运行。

核心代码

html 代码

<label class="label78">
  <input type="checkbox" class="checkbox78" />
  <div class="status78"></div>
</label>

按钮开关主体代码结构。

css 部分代码

.label78{
position: relative;
cursor: pointer;
overflow: hidden;
}
.checkbox78{
width:90px;
height:40px;
background-color:#000000;
border-radius:20px;
margin:0;
cursor: pointer;
box-sizing: border-box;
transition: all 0.4s linear;
  appearance: none;
-webkit-appearance: none;
}
.status78{
width:16px;
height:16px;
background-color: transparent;
box-shadow: inset -6px -4px 0 yellow;
border-radius:50%;
position: absolute;
right:17px;
top:12px;
transition: all 0.4s linear;
display: flex;
align-items: center;
justify-content: center;
}
.status78:after{
content:'夜间';
font-size:14px;
font-weight: bold;
color:#ffffff;
letter-spacing:3px;
line-height:1;
position: absolute;
left:-38px;
top:1px;
}
.checkbox78:checked{
background-color:#ebebeb;
}
.checkbox78:checked+.status78{
width:16px;
height:16px;
box-shadow: inset -16px -16px 0 red;
right:17px;
}
.checkbox78:checked+.status78:after{
content:'日间';
color:#000000;
}

1、定义 label 标签以及 input 标签的基本样式,定义 input 标签的 type 属性为 type="checkbox"

2、通过 appearance 自定义外观属性,定义多选框外观效果,并且给多选框添加过渡属性 transition: all 0.4s linear; ,设置多选框所有属性可进行过渡动画进行。

3、定义 .status78 基本样式,通过 box-shadow 阴影效果来实现小月亮图标,同样给 status78 添加过渡属性 transition: all 0.4s linear; ,设置所有属性可进行过渡动画进行。

4、基于 .status78 创建 :after 伪元素以及基本样式,配合 content 属性给按钮开关添加文字元素。

5、利用 :checked 选择器,当开关按钮被选中时,按钮背景颜色过渡,并且改变 .status78 月亮样式,通过改变 box-shadow 阴影属性值以及相关基本样式,让月亮小图标过渡变化成小太阳图标,以及变化 .status78:after 伪元素中的 content 属性,变化文字提示内容以及文字颜色。

Tip: 特别说明 appearance 属性的浏览器兼容性不是很高,注意补充 -webkit-appearance 浏览器兼容效果。

appearance 浏览器兼容性图解

完整代码如下

html 页面

<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="style.css">
<title>日夜间切换开关</title>
</head>
<body>
<div class="app">
<label class="label78">
<input type="checkbox" class="checkbox78" />
<div class="status78"></div>
</label>
</div>
</body>
</html>

css 样式

.app{
width:100%;
height:100vh;
background-color:#ffffff;
position: relative;
display: flex;
justify-content: center;
align-items: center;
}
.label78{
position: relative;
cursor: pointer;
overflow: hidden;
}
.checkbox78{
width:90px;
height:40px;
background-color:#000000;
border-radius:20px;
margin:0;
cursor: pointer;
box-sizing: border-box;
transition: all 0.4s linear;
  appearance: none;
-webkit-appearance: none;
}
.status78{
width:16px;
height:16px;
background-color: transparent;
box-shadow: inset -6px -4px 0 yellow;
border-radius:50%;
position: absolute;
right:17px;
top:12px;
transition: all 0.4s linear;
display: flex;
align-items: center;
justify-content: center;
}
.status78:after{
content:'夜间';
font-size:14px;
font-weight: bold;
color:#ffffff;
letter-spacing:3px;
line-height:1;
position: absolute;
left:-38px;
top:1px;
}
.checkbox78:checked{
background-color:#ebebeb;
}
.checkbox78:checked+.status78{
width:16px;
height:16px;
box-shadow: inset -16px -16px 0 red;
right:17px;
}
.checkbox78:checked+.status78:after{
content:'日间';
color:#000000;
}

页面渲染效果

以上就是所有代码,以及简单的思路,希望对你有一些帮助或者启发。


我是 Just,这里是「设计师工作日常」,求点赞求关注!