有趣的css - 黑色质感科技开关

设计师工作日常

于 2025-06-16 08:52:26 发布

阅读量580

点赞数 5

CC 4.0 BY-SA版权

分类专栏：有趣的css 文章标签： css 前端动效设计交互设计 ux/ui 开关按钮

本文链接：https://blog.csdn.net/justliu1989/article/details/147274430

有趣的css 专栏收录该内容

97 篇文章

订阅专栏

🍭

大家好，我是 Just，这里是「设计师工作日常」，今天分享的是一款黑色质感科技开关。

最新文章通过公众号「设计师工作日常」发布。

整体效果

💎知识点：
1️⃣ transition 过渡属性
2️⃣ box-shadow 阴影属性
3️⃣ position 定位属性
4️⃣ :checked 选择器

🔑思路：
通过多选框选中未选中属性来模拟开关状态。

一款竖形黑色质感开关,适用于个性科技风格界面中。

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

核心代码

html 代码

<label class="label96">
	<input class="inp96" type="checkbox">
	<span class="check-span96">
		<span class="switch96-box">
			<span class="light96"></span>
			<span class="line96"></span>
			<span class="line96"></span>
		</span>
	</span>
</label>

开关主体结构代码。

css 部分代码

.label96{
	width: 40px;
	height: 90px;
	position: relative;
	cursor: pointer;
}
.inp96{
	display: none;
}
.check-span96{
	width: 100%;
	height: 100%;
	display: block;
	background-color: #0d0d0d;
	border: 2px solid #000;
	box-sizing: border-box;
	border-radius: 5px;
	position: relative;
}
.switch96-box{
	width: 32px;
	height: 50px;
	position: absolute;
	top: 2px;
	left: 2px;
	border-radius: 3px;
	background: linear-gradient(to bottom, #333333, #242323);
	box-shadow: 0 0 4px 2px rgba(255, 0, 0, 0.1);
	display: flex;
	justify-content: center;
	transition: all 0.4s cubic-bezier(0.99, 0.1, 0.1, 0.99);
}
.light96{
	width: 3px;
	height: 3px;
	border-radius: 50%;
	background-color: rgba(250, 10, 10, 1);
	border: 1px solid #222;
	box-shadow: 0 0 8px 1px rgba(250, 10, 10, 1);
	position: absolute;
	top: 12px;
	transition: all 0.4s cubic-bezier(0.99, 0.1, 0.1, 0.99);
}
.line96{
	width: 24px;
	height: 2px;
	background-color: #202020ea;
	box-shadow: 0 -1px 1px rgba(255,255,255,0.2),0 1px 1px rgba(0,0,0,1);
	position: absolute;
	top: 28px;
}
.line96:last-child{
	top: 36px;
}
.inp96:checked + .check-span96 .switch96-box{
	top: 34px;
	box-shadow: 0 0 4px 2px rgba(0, 250, 0, 0.1);
}
.inp96:checked + .check-span96 .switch96-box .light96{
	background-color: rgba(0, 250, 10, 1);
	box-shadow: 0 0 8px 1px rgba(0, 250, 10, 1);
}

1、先绘制出整体的基本样式，并且隐藏掉多选按钮 display: none;。

2、再绘制出开关控件按钮块,给按钮块补充一些发光小灯和触摸横线的细节,并且给相关元素增加过渡属性动画

3、然后利用 :checked 选择器来模拟开关选中时,过渡实现一些元素样式过渡.

完整代码如下

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="label96">
				<input class="inp96" type="checkbox">
				<span class="check-span96">
					<span class="switch96-box">
						<span class="light96"></span>
						<span class="line96"></span>
						<span class="line96"></span>
					</span>
				</span>
			</label>
		</div>
	</body>
</html>

css 样式

/** style.css **/
.app{
	width: 100%;
	height: 100vh;
	background-color: #222;
	position: relative;
	display: flex;
	justify-content: center;
	align-items: center;
}
.label96{
	width: 40px;
	height: 90px;
	position: relative;
	cursor: pointer;
}
.inp96{
	display: none;
}
.check-span96{
	width: 100%;
	height: 100%;
	display: block;
	background-color: #0d0d0d;
	border: 2px solid #000;
	box-sizing: border-box;
	border-radius: 5px;
	position: relative;
}
.switch96-box{
	width: 32px;
	height: 50px;
	position: absolute;
	top: 2px;
	left: 2px;
	border-radius: 3px;
	background: linear-gradient(to bottom, #333333, #242323);
	box-shadow: 0 0 4px 2px rgba(255, 0, 0, 0.1);
	display: flex;
	justify-content: center;
	transition: all 0.4s cubic-bezier(0.99, 0.1, 0.1, 0.99);
}
.light96{
	width: 3px;
	height: 3px;
	border-radius: 50%;
	background-color: rgba(250, 10, 10, 1);
	border: 1px solid #222;
	box-shadow: 0 0 8px 1px rgba(250, 10, 10, 1);
	position: absolute;
	top: 12px;
	transition: all 0.4s cubic-bezier(0.99, 0.1, 0.1, 0.99);
}
.line96{
	width: 24px;
	height: 2px;
	background-color: #202020ea;
	box-shadow: 0 -1px 1px rgba(255,255,255,0.2),0 1px 1px rgba(0,0,0,1);
	position: absolute;
	top: 28px;
}
.line96:last-child{
	top: 36px;
}
.inp96:checked + .check-span96 .switch96-box{
	top: 34px;
	box-shadow: 0 0 4px 2px rgba(0, 250, 0, 0.1);
}
.inp96:checked + .check-span96 .switch96-box .light96{
	background-color: rgba(0, 250, 10, 1);
	box-shadow: 0 0 8px 1px rgba(0, 250, 10, 1);
}