使用 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));}
