Web前端动画开关的实现（HTML+CSS）

高旭的旭

已于 2023-01-19 11:00:38 修改

阅读量603

点赞数 1

分类专栏：编程学习文章标签：前端 css html

于 2023-01-19 10:56:17 首次发布

本文链接：https://blog.csdn.net/weixin_47540149/article/details/128733256

版权

编程学习专栏收录该内容

4 篇文章 0 订阅

订阅专栏

Web前端动画开关的实现（HTML+CSS）

利用HTML和CSS自写Element-ui的Switch开关

实现效果

演示效果

实现代码

HTML部分：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<link rel="stylesheet" href="switch.css">
	</head>
	<body>
		<div class="switch-container">
			<input type="checkbox" class="check" id="toggle">
			<label class="switch" for="toggle"></label>
		</div>
	</body>
</html>

CSS部分：

.switch-container .check {
	display: none;
}
.switch-container .switch {
	display: inline-block;
	position: relative;
	width: 40px;
	height: 20px;
	background-color: #13ce66;
	border-radius: 10px;
	box-sizing: border-box;
	cursor: pointer;
	transition: all 0.3s;
}
.switch-container .switch::after {
	content: '';
    position: absolute;
    top: 2px;
    right: 2px;
    width: 16px;
    height: 16px;
    background-color: #fff;
    border-radius: 100%;
    transition: all 0.3s;
}
.switch-container .check:checked + .switch::after {
    transform: translateX(-20px);
}
.switch-container .check:checked + .switch {
    background-color: #ff4949;
}

CSS看着不清晰的也可以看一下LESS的代码：

.switch-container {
	.check {
		display: none;
	}
	.switch {
		display: inline-block;
		position: relative;
		width: 40px;
		height: 20px;
		background-color: rgb(19, 206, 102);
		border-radius: 10px;
		box-sizing: border-box;
		cursor: pointer;
		transition: all 0.3s;
		&::after {
			content: '';
			position: absolute;
			top: 2px;
			right: 2px;
			width: 16px;
			height: 16px;
			background-color: #fff;
			border-radius: 100%;
			transition: all 0.3s;
		}
	}
	.check:checked + .switch::after {
		transform: translateX(-20px);
	}
	.check:checked + .switch {
		background-color: rgb(255, 73, 73);
	}
}