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

最新推荐文章于 2024-07-18 17:32:29 发布

耀南.

最新推荐文章于 2024-07-18 17:32:29 发布

阅读量1.1k

点赞数

分类专栏：前端好玩炫酷的动画小案例文章标签：前端 css html

本文链接：https://blog.csdn.net/YN2000609/article/details/133621170

版权

前端好玩炫酷的动画小案例专栏收录该内容

68 篇文章 9 订阅

订阅专栏

更多前端简单小组件尽在主页！喜欢可以收藏哦！

代码

<!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>

更多前端简单小组件尽在主页！喜欢可以收藏哦！