前端实战小案例--简单美观switch开关

最新推荐文章于 2023-03-21 21:03:38 发布

朽木自雕xmzd

最新推荐文章于 2023-03-21 21:03:38 发布

阅读量961

点赞数 3

分类专栏：前端实战案例文章标签：前端实战案例

本文链接：https://blog.csdn.net/qq_16687863/article/details/102924376

版权

前端实战案例专栏收录该内容

20 篇文章 52 订阅

订阅专栏

前端实战小案例--简单美观switch开关

想练习更多前端案例，请进个人主页，点击前端实战案例->传送门

觉得不错的记得点个赞?支持一下我0.0！谢谢了！

不积跬步无以至千里，不积小流无以成江海。

效果图如下：

代码如下：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>简单美观switch开关</title>
	</head>
	<style>
		html,body{
			margin: 0;
			padding: 0;
		}
		.switch{
			position: absolute;
			top: 50%;
			left: 50%;
			transform: translate(-50%,-50%);
			display: block;
			width: 400px;
			height: 50px;
			background: #fff;
			border-top: 1px solid #ccc;
			border-bottom: 1px solid #ccc;
		}
		.switch span:nth-child(1){
			line-height: 50px;
			padding-left: 10px;
			color: black;
		}
		.switch input{
			display: none;
		}
		.s{
			position: absolute;
			top: 5px;
			right: 5px;
			display: block;
			width: 80px;
			height: 40px;
			background: #ccc;
			border-radius: 20px;
			cursor: pointer;
			transition: 0.8s;
		}
		.s:before{
			content: "";
			width: 30px;
			height: 30px;
			position: absolute;
			top: 5px;
			left: 5px;
			border-radius: 15px;
			background: #009CFC;
			transition: 0.8s;
		}
		.switch input:checked + .s{
			background: #009CFC;
		}
		.switch input:checked + .s:before{
			transform: translateX(40px);
			background: #fff;
		}

	</style>
	<body>
		<label class="switch">
			<span>飞行模式</span>
			<input type="checkbox" />
			<span class="s"></span>
		</label>
	</body>
</html>

朽木自雕xmzd

关注

3
点赞
踩
9

收藏

觉得还不错? 一键收藏
0
评论
前端实战小案例--简单美观switch开关

简单美观switch开关--前端实战小案例想练习更多前端案例，请进个人主页，点击前端实战案例->传送门觉得不错的记得点个赞?支持一下我0.0！谢谢了！不积跬步无以至千里，不积小流无以成江海。效果图如下：代码如下：<!DOCTYPE html><html> <head> <meta charset="utf-8"&...
复制链接

扫一扫