使用 HTML CSS 制作的开关切换效果按钮

    使用 CSS 创建了一个带有检查动画的切换按钮，按钮显示电源状态。它可在开启和关闭状态之间直观地切换。该按钮可在网页中用于多种用途，如指示电源状态或启用/禁用某些功能，此外，还可以根据自己的喜好自定义颜色、大小或动画效果，你可以修改 :root 选择器中的 CSS 变量来改变按钮的外观。

如何使用 HTML CSS 创建带选中动画的切换按钮

1.首先创建一个新的 HTML 文件，然后用你喜欢的文本编辑器打开它。然后，将以下 HTML 代码复制到文件中：

<label class="switch">
	<input class="switch__input" type="checkbox" role="switch">
	<svg class="switch__check" viewBox="0 0 16 16" width="16px" height="16px">
		<polyline class="switch__check-line" fill="none" stroke="hsl(var(--hue),10%,50%)" stroke-dasharray="9 9" stroke-dashoffset="3.01" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" points="5,8 11,8 11,11" />
	</svg>
	<span class="switch__sr">Power</span>
</label>

这段 HTML 代码为我们的切换按钮设置了基本结构。它包括一个带有输入复选框的标签和一个用于复选动画的 SVG。

2. 接下来，让我们为按钮设计样式，使其具有视觉吸引力。将下载的 styles.css 代码复制到你的样式文件中

/* 部分代码，完整版请下载 */
:root {
	--hue: 223;
	--bg: hsl(var(--hue),90%,90%);
	--fg: hsl(var(--hue),90%,10%);
	--trans-dur: 0.3s;
	--trans-timing: cubic-bezier(0.65,0,0.35,1);
	font-size: calc(40px + (80 - 40) * (100vw - 320px) / (2560 - 320));}