css实现传统左右拨杆电灯开关切换效果代码-html代码-BFW代码库

css实现传统左右拨杆电灯开关切换效果代码

代码语言：html

所属分类：其他

代码描述：css实现传统左右拨杆电灯开关切换效果代码

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">

  
  
  
<style>
*,
::before,
::after {
	box-sizing: border-box;
}
:root {
	--bg-clr: rgb(14, 44, 87);
}

.light {
	position: absolute;
	top: 0;
	left: 50%;
	translate: -50% -10px;
	width: 150px;
}
.light > .light-rays {
	color: var(--light-clr, transparent);
	transition: 300ms ease-in-out;
}

.switch {
	--toggle-clr: rgb(220, 38, 38);
	--toggle-clr-checked: rgb(22, 163, 74);
	--toggle-width: 40px;
	--toggle-height: 80px;
	--toggle-rotate: -30deg;
	--toggle-rotate-checked: 30deg;

	--toggle-base-height: 60px;
	--toggle-base-width: 180px;
	--toggle-base-clr: black;

	position: relative;
	cursor: pointer;
	display: block;
	width: calc(var(--toggle-width) * 2);
	height: calc(var(--toggle-height) + var(--toggle-stick-height));
	display: grid;
	place-content: center;
}

.switch > input[type="checkbox"] {
	position: relative;
	appearance: none;
	width: var(--toggle-width);
	height: var(--toggle-height);
	background-color: var(--toggle-clr);
	border-radius: 50px 50px 50px 50px / 30px 30px 200px 200px;
	rotate: var(--toggle-rotate);
	transform-origin: center bottom;
	transition: 150ms ease-in-out;
	outline: none;
	border: none;
	box-shadow: inset 6px -2px 5px rgba(0 0 0 / 0.25),
		inset 2px 4px 5px rgba(255 255 255 / 0.45);
.........完整代码请登录后点击上方下载按钮下载查看