react+css实现松露切换开关代码-html代码-BFW代码库

react+css实现松露切换开关代码

代码语言：html

代码描述：react+css实现松露切换开关代码

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

<!doctype html>
<html lang="en" dir="ltr">
	<head>
		<meta charset="UTF-8" />
	
		<meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover" />
		<style>
			* {
				border: 0;
				box-sizing: border-box;
				margin: 0;
				padding: 0;
			}

			:root {
				--hue: 223;
				--gray50: hsl(var(--hue) 10% 95%);
				--gray250: hsl(var(--hue) 10% 75%);
				--primary500: hsl(var(--hue) 90% 50%);
				--primary500-03: hsl(var(--hue) 90% 50% / 0.3);
				--gray750: hsl(var(--hue) 10% 25%);
				--gray950: hsl(var(--hue) 10% 5%);
				--trans-dur: 0.3s;
				color-scheme: light dark;
				font-size: clamp(48px, 2.85rem + 0.75vw, 60px);
			}

			body,
			input {
				color: light-dark(var(--gray950), var(--gray50));
				font: 1em / 1.5 sans-serif;
			}

			body {
				background-color: light-dark(var(--gray50), var(--gray950));
				display: grid;
				place-items: center;
				height: 100vh;
				transition:
					background-color var(--trans-dur),
					color var(--trans-dur);
			}

			.switch {
				display: flex;
			}

			.switch,
			.switch__input {
				cursor: pointer;
				-webkit-tap-highlight-color: transparent;
			}

			.switch__input {
				background-color: light-dark(var(--gray250), var(--gray750));
				border-radius: 0.75em;
				box-shadow: 0 0.375em 0.75em hsl(0 0% 0% / 0.1);
				display: block;
				positi.........完整代码请登录后点击上方下载按钮下载查看